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

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

关联的问题,在帖子 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。

    351 引用 • 1813 回帖
  • Solo

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

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

    1434 引用 • 10054 回帖 • 490 关注
  • Q&A

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

    8106 引用 • 36989 回帖 • 161 关注
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
敢问路在何方,正在思考。。。 南京

推荐标签 标签

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖 • 1 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • danl
    132 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • 七牛云

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

    27 引用 • 225 回帖 • 170 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖 • 1 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 2 关注
  • Solo

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

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

    1434 引用 • 10054 回帖 • 490 关注
  • etcd

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

    5 引用 • 26 回帖 • 529 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖 • 1 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    690 引用 • 535 回帖
  • sts
    2 引用 • 2 回帖 • 196 关注
  • Webswing

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

    1 引用 • 15 回帖 • 629 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 665 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注