关于 solo 中使用 vditor 的几个疑问

本贴最后更新于 1732 天前,其中的信息可能已经事过景迁

关联的问题,在帖子 Vditor 使用指南中的一个评论
下面是原文

一个小问题 希望有缘人回答一下。本人在自己的服务器上部署了博客 solo,在家用 vditor 编辑预览文章都没问题,今天来公司,想写点东西,发现预览功能无法使用,左边输入的内容,右边无法显示预览,一片空白。chrome 里面用 f12 抓了下网络请求,发现有个请求被公司内网屏蔽了,具体是 我的网址 /console/markdown/2html,这个请求失败导致的。我试了下给出的教程链接 //https://hacpai.com/guide/markdown 这个预览就没问题,我看网络也是请求到后台去的 //https://hacpai.com/markdown,然后返回解析后的 html 网页。

  1. 想问下 目前 vaditor 的预览不是用 markdown-it 支持前端预览吗?我是个大后端,对前端不太明白,为何这个预览还要网络请求,貌似是调到后台的转换方法 flexmark 了,还是有什么开关或者配置?
  2. vditor 本身是只是一个 markdown 编辑器,转换预览 (解析器功能) 还是依赖第三方的组件,前端预览用 markdown-it,集成在 vditor 中,通过后端预览是发送到后端 ( 路径是 我的网址 /console/markdown/2html) 然后先判断
    MARKDOWN_ENGINE_URL 是否可用,否的话就用集成的 flexmark。我这样理解对不对?

针对以上问题又仔细看了下代码以及使用指南的相关评论,目前预览中实现是这样

vditor.mdTimeoutId = window.setTimeout(() => {
            const renderStartTime = new Date().getTime();
            if (vditor.options.preview.url) {
                const xhr = new XMLHttpRequest();
                xhr.open("POST", vditor.options.preview.url);
                xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                xhr.onreadystatechange = () => {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            const responseJSON = JSON.parse(xhr.responseText);
                            if (responseJSON.code !== 0) {
                                alert(responseJSON.msg);
                                return;
                            }
                            this.element.innerHTML = responseJSON.data;
                            this.afterRender(vditor, renderStartTime);
                        }
                    }
                };

                xhr.send(JSON.stringify({
                    markdownText: vditor.editor.element.value,
                }));
            } else {
                md2html(vditor, vditor.options.preview.hljs.enable).then((html) => {
                    this.element.innerHTML = html;
                    this.afterRender(vditor, renderStartTime);
                });
            }
        }, vditor.options.preview.delay);

会去判断 vditor.options.preview.url,而 solo 中使用 vditor 的时候是在 page.js 这个文件中设置了这个全局的变量的

window.vditor = new Vditor('soloEditorComment', {

        placeholder: that.tips.commentContentCannotEmptyLabel,
        height: 180,
        tab: '\t',
        hint: {
          emojiPath: Label.staticServePath + '/images/emoji',
        },
        esc: function () {
          $('#soloEditorCancel').click()
        },
        ctrlEnter: function () {
          $('#soloEditorAdd').click()
        },
        preview: {
          delay: 500,
          show: false,
          url: Label.servePath + '/console/markdown/2html',
          hljs: {
            enable: true,
            style: Label.hljsStyle,
          },
          parse: function (element) {
            if (element.style.display === 'none') {
              return
            }
            Util.parseLanguage()
          },
        },
        counter: 500,
        resize: {
          enable: resizeEnable,
          position: 'top',
        },
        lang: Label.langLabel,
        toolbar: toolbar,
      })
      vditor.focus()
    }

也就是现在每次预览都是去请求我后台的那个 servePath + '/console/markdown/2html'的方法,而不会用到 vditor 本身内置的 markdown-it 这个库了,不知道这样理解对不对。至于为何不能直接在前端做预览,我也看到 @88250回复了,表示理解。另外,现在是不是 B3log 相关的产品都不在前端做预览,而是统一后端做,比如用你们推出的 marked-http,vditor 中加入这样的这判断,是为了开源给大家,让使用 vditor 的人自己选择用前端还是用后端做渲染,这样理解对吗?如果我要在 solo 中用前端渲染,是不是修改 page.js 中的 url 就可以了?感谢回答。

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    313 引用 • 1666 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1425 引用 • 10043 回帖 • 468 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6550 引用 • 29422 回帖 • 245 关注
1 操作
lisaem 在 2019-07-29 17:02:38 更新了该帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 编辑器中需要前端做预览的话,删除 preview.url 配置就可以了

    1 回复
  • 如果启用了 marked-http 就不会使用 flexmark,这点和前端编辑器预览没有关系
    如果配置了 preview.url 就会使用后段进行渲染,否则使用 markdown-it

  • lisaem
    作者

    谢谢回复,这个 preview.url 没有设置成可配置项吧,我这边如果要 solo 前端渲染,是不是要手动改下 page.js 中的代码,然后替换到线上就行?

    1 回复
  • 线上用的是 page.min.js,修改完以后需要运行 npm install && npm run build,然后替换 page.min.js 即可

  • pengpeng000

    请问一下这个怎么去掉image.png

    该回帖因偏离主题而被折叠
    1 回复
    1 操作
    Vanessa 在 2020-05-09 23:53:24 折叠了该回帖
  • 第一个无法删除,可以更换为 ir / sv 编辑模式

    第二个可参看 https://hacpai.com/article/1549638745630 配置

请输入回帖内容 ...
lisaem
敢问路在何方,正在思考。。。 南京

推荐标签 标签

  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 685 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 43 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 447 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 693 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 398 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 636 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    21 引用 • 58 回帖 • 1 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    53 引用 • 85 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 466 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 492 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    4 引用 • 55 回帖 • 8 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖 • 1 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 111 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖 • 1 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    25 引用 • 215 回帖 • 165 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 222 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 563 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 351 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 39 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 627 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 6 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 513 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 7 关注