上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 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

70

主题

682

帖子

596

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
596

猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章

发表于 2021-7-27 09:46:38 | 显示全部楼层
老版本了 哥哥
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表