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

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

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2022-6-8 21:09
  • 签到天数: 48 天

    [LV.5]常住居民I

    135

    主题

    1798

    帖子

    1972

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    1972

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

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

    使用道具 举报

    发表回复

    本版积分规则

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