【废弃】Vue使用tui-editor的Markdown编辑器

李恒道 · 发表于 2021-7-26 21:42:47

Vue使用Markdown编辑器

这里我使用的是tui-editor编辑器

使用npm install --save tui-editor # Latest version

安装tui-editor安装

编辑器

然后在使用的vue页面

import Editor from 'tui-editor'; /* ES6 */

导入Editor组件

并导入相关依赖

import 'tui-editor/dist/tui-editor.css'; // 编辑器ui
import 'tui-editor/dist/tui-editor-contents.css'; // 编辑器内容
import 'codemirror/lib/codemirror.css'; // codemirror 不知道是啥
import 'highlight.js/styles/github.css'; // 代码快高亮

在组件created的时候输入

    this.$nextTick(() => {
      var editor = new Editor({
        el: document.querySelector("#editor"),
        initialEditType: "markdown",
        previewStyle: "vertical",
        height: "300px"
      });
      editor.getHtml();
    });

因为我们使用了document.querySelector("#editor")，所以要使用nexttick在页面加载后再执行该函数

如果你想使用其他函数以及初始化状态可以查阅https://nhn.github.io/tui.editor/latest/ToastUIEditor

编辑器的默认选项

默认选项
height: 字符串高度或自动  300px|auto
initialValue： 初始值,设置 Markdown 字符串
initialEditType: 要显示的初始类型是markdown|wysiwyg
previewType: Markdown模式预览样式tab|vertical
usageStatistics：让我们知道域名。我们想统计您学习如何使用编辑器。你可以随意禁用它。true|false

查看器

TOAST UI编辑器也提供了查看器，以便于在不加载编辑器的情况下显示Markdown的内容，查看器比编辑器轻的多

import 'tui-editor/dist/tui-editor-contents.css';
import 'highlight.js/styles/github.css';

import Viewer from 'tui-editor/dist/tui-editor-Viewer';

const instance = new Viewer({
  el: document.querySelector('#viewerSection'),
  height: '500px',
  initialValue: '# content to be rendered'
});

instance.getHtml();

注意

不要同时加载编辑器以及查看器，因为编辑器已经包含了查看器函数

你可以在初始化编辑器的同时

使用Editor.factor()函数和设置viewer选项的值为true

使编辑器成为查看器，也调用getHtml()以呈现HTML(查看器疑似没有这个函数)

例子如下

import Editor from 'tui-editor';

const instance = Editor.factory({
  el: document.querySelector('#viewerSection'),
  viewer: true,
  height: '500px',
  initialValue: '# content to be rendered'
});

关于查看器再次设置内容可以setMarkdown

如果你想使用其他函数以及初始化状态可以查阅https://nhn.github.io/tui.editor/latest/ToastUIEditorViewer#addHook