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

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

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

    386 引用 • 1892 回帖
  • Solo

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

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

    1449 引用 • 10092 回帖 • 488 关注
  • Q&A

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

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

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Windows

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

    232 引用 • 484 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 563 关注
  • Oracle

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

    107 引用 • 127 回帖 • 329 关注
  • uTools

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

    9 引用 • 75 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 285 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 8 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • abitmean

    有点意思就行了

    44 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 516 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 120 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 429 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    14 引用 • 84 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    285 引用 • 248 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    60 引用 • 22 回帖 • 2 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • 千千插件

    千千块(自定义块 css 和 js)
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 10 关注