• 请不要在回答技术问题时复制粘贴 AI 生成的内容
rizon
V2EX  ›  程序员

notelive.cc 又更新了,现在有更好用的编辑器了!以及一些问题与一个协同编辑的 DEMO

  •  
  •   rizon ·
    othorizon · Jun 4, 2019 · 2436 views
    This topic created in 2578 days ago, the information mentioned may be changed or developed.

    如题,notelive.cc 最近抽空更新了一版,把原来的淳朴的 textarea 编辑框换成了 manaco editor,
    如果你觉得陌生,那么我和你说 vscode 你就知道了,这个就是那货。
    带来的一个小代价就是打包有些大了,第一次加载时速度会有些慢。
    选择不同的语言会有不同的高亮,并且对应的右键菜单会有一些不一样的功能。与 vs 一样,按'F1'会有所有动作。

    欢迎各位看官品尝。
    pwa 的应用,如果是第一次打开加载比较慢,如果以前用过那么会缓存着历史版本,虽说也会自动更新,但是想立即看到效果还是要强制刷新一下。


    除此之外,有几个问题要请教一下各位大佬。

    1.webpack 的项目打包 manaco editor 就比较大,我想通过 cdn 去加载编辑器,也看了官方文档还是没弄出来,有哪位大佬有经验可以分享下哈?
    2.使用的 webpack 的 offline 插件做的 pwa,对于服务更新后,客户端怎么才能更好的获知发生变化并执行更新?现在是会自动更新,但是因为用户也不能感知,而且下载还需要时间,用户可能要在第 n 次重新打开页面后才能拿到最新的版本。
    offline-plugin 有个 autoupdate 参数,我不知道这个怎么用会有什么效果,麻烦谁能给解释下?
    以及这个参数中的'时间间隔'是什么意思?为什么会有个间隔?难道他是定期去检查是否有更新然后强制刷新吗?


    ps. 我发现 notelive 的 api 功能一直在被用,而且是频率比较高的使用,姑且是加了简单的缓存机制减少了数据库的查询,但还是有些担心这个廉价地摊的服务器能不能 hold 的住,没钱折腾机器了。


    最后,最近在繁忙的工作中抽空做了一个协同编辑的 DEMO
    机器性能很有限,而且是一个很粗暴的 DEMO,没有什么优化,大家可以试试,看看效果如何,现在还有些 bug。
    http://rizon.coding.me/notelive_coolab_demo/
    打开地址(只能打开这个地址访问),等待加载完成(略慢),点击 DEMO,然后相同的操作再开 1 个窗口(不能直接复制地址),开始体验。
    这个是联网的,在这个 DEMO 中所有人都在一个文档下编辑。
    机器性能有限,也可能试的人多了就卡住了,或者直接挂了。
    试用完说下体验哈,如果还行我就考虑把它做到现在的 notelive.cc 中去。

    Supplement 1  ·  Jun 5, 2019

    还想讨论下协同编辑,大佬们有什么比较好的思路吗?
    我现在面对的问题就是如果在同步中出现数据丢失就很麻烦,不能很好的修复错误数据,比如去服务器上拉取完整的数据写回本地,覆盖掉本地的错误数据,但是哪些算是同步错误的数据,哪些是用户本地编辑的数据就很难判断,而如果简单的直接完全覆盖本地数据还会因为数据变化而导致丢失了光标位置(正在编辑的文字位置已经变化了,而且不知道跑到哪个位置去了,没法重新定位)。

    总之,‘石墨’在这方面做的很好,请问有大佬能给个思路吗?石墨是怎么去做这些保障的?

    Supplement 2  ·  Jun 5, 2019
    我现在已经做到了可以协同编辑,多人同时编辑同一行文字也好,不同行文字也好,不会有任何问题,其他人的编辑操作不会影响到你正在进行的操作,但是我现在的问题就是怎么去修复因同步数据丢失导致的客户端数据与服务器数据不一致问题(比如丢失了中间的某几个版本的变化)。
    8 replies    2019-06-05 22:51:26 +08:00
    rizon
        1
    rizon  
    OP
       Jun 4, 2019
    真冷清~~
    qiguai2017
        2
    qiguai2017  
       Jun 4, 2019
    加点人气
    yixiang
        3
    yixiang  
       Jun 4, 2019
    1. browserify 的 browserify-shim 能实现。webpack 官方文档里也有 shimming,应该能实现相同功能。2M 确实大了。
    faywanghq
        4
    faywanghq  
       Jun 4, 2019
    好的编辑器都是纯用 c/c++ 实现的,浏览器套壳,或 java 套壳的都是耍流氓
    comingnine
        5
    comingnine  
       Jun 5, 2019
    好像不支持 上下标写法, 或 Latex 公式
    iblessyou
        6
    iblessyou  
       Jun 5, 2019
    之前用你的这个网站,学习 VUE 时利用 api 接口做了个简单的可以增删改查的网页
    所以 api 接口用的多,可能有人也用了类似方法?
    我自己开发时前端时测试也用过这个当后台,毕竟速度还挺快。
    某些学校老师如果把这个告诉学生,然后去练习增删改查,或者自己做网页等等,感觉这个挖一下玩法挺多的

    刚试了下,发现 html 渲染页面打不开,我那个也看不了了暂时
    iblessyou
        7
    iblessyou  
       Jun 5, 2019
    额,发完上面的话 再试了几次 发现可以打开了,只是打开后一直还是显示在加载中
    rizon
        8
    rizon  
    OP
       Jun 5, 2019
    @iblessyou #7 之前遗留了一个底部的渲染链接错误的问题,现在已经修复了(需要等待后台安装成功后下次打开时生效)。
    api 接口这个深挖是有很多玩法,不过这东西在各方面来说也是有一些隐患的。目前还是保留下来了,毕竟小众 app,都还好。

    另外,今晚上线了一个协同编辑的功能,,可以支持多人同时编辑了(如果没发现有则说明还需要等待新版本安装成功后再重新打开网页)。。 目前还是 beta 版,不稳定。不会影响原有功能的正常使用。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   933 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 19:46 · PVG 03:46 · LAX 12:46 · JFK 15:46
    ♥ Do have faith in what you're doing.