TUI.Editor Markdown 编辑器基于 JavaScript 使用

tui.editor 一款基于MIT开源协议的markdown编辑器，功能好用。

编辑器部分

引入必要文件

<link rel="stylesheet" href="your/path/to/tui@editor/toastui-editor.min.css">
<script src="your/path/to/tui@editor/toastui-editor-all.min.js"></script>
<script src="your/path/to//tui@editor/i18n/zh-cn.js"></script>

三个文件来源，tui.editor cdn下载参考GitHub描述

javascript 版路径：tui.editor/apps/editor at master · nhn/tui.editor · GitHub

这里只查看原生JavaScript版

注意：通过npm -i 下载的没有all.js文件哟。

创建tui.editor markdown编辑器

首先在body定义一个div

<div id="editor"></div>

然后JavaScript编写

<script>
		let height = window.innerHeight - 268;//高度自己根据情况来
        const Editor = toastui.Editor;

        let myEditor = new Editor({
            usageStatistics: false,//关闭采集用户数据
            language:'zh-CN',//tui.editor设置中文
            el:document.querySelector('#editor'),//实例化编辑器的原生js对象
            height:height+'px',//高度，注意单位拼接
            initialEditType: 'markdown',//类型
            previewStyle: 'vertical',//布局方式
            initialValue:'md content',//初始化加载的内容（如编辑业务需要设置）

            hooks:{
                //图片上传
                'addImageBlobHook':function (blob,callback){//这里tui的callback需要一个能访问图片的url
                    let formData = new FormData();
                    formData.append('file',blob);
                    upload('/your/upload/',formData,function (url){//这里是你上传接口实现后返回的一个可以访问的图片url
                        callback(url)//值设置给tui的回调
                    })

                }
            }
        })
</script>

至此一个基础的tui.editor markdown 编辑器实例化成功。

介绍几个核心方法：

• myEditor.getMarkdown() 获取markdown格式内容
• myEditor.getHTML() 获取HTML格式内容

其他请参考官网document部分

查看解析部分

该部分主要讲解在保存markdown内容后回显查看事宜。

可以两种方式实现回显

方案一：编辑器同时保存markdown内容和HTML内容回显时候直接把保存的HTML代码直接拿出来展示。

方案二：回显时候使用tui.editor提供的viewer,解析markdown内容回显

两种方案各有优劣

直接存HTML的回显方便而且可以作为博客/或者其他Wiki等内容系统给搜索引擎收录。

经测，tui提供的viewer解析更和编辑器预览一致性高。

方案一，这里不做讲解，下面讲解下方案二的操

引入viewer必要文件

<link rel="stylesheet" href="your/path/to/tui@editor/toastui-editor-viewer.min.css">
<script src="your/path/to/tui@editor/toastui-editor-viewer.min.js"></script>

注：文件来源参考上面的cdn方案获取然后存放本地。

定义回显所在元素

<div id="markdownView"></div>

编写回显脚本

<script>
    //回显tui@editor内容
    const Viewer = toastui.Editor;
    const viewer = new Viewer({
      el: document.querySelector('#markdownView'),//回显的html原生元素
      height: 'auto',
      initialValue: 'markdown 内容',//这里填充上面编辑器保存的内容。
    });
</script>

至此搞定回显，回显不需要引入编辑器那一套的js和css，只需要viewer相关就可以。

另外由于编辑器是国外的，默认字体不太适合，需要自定义一下

<style>
    /*tui.editor contents*/
    .tui-editor-contents,.toastui-editor-contents{
        font-family:Verdana, Arial, Helvetica, AppleGothic, sans-serif !important;
        font-size: 14px;
    }
</style>

注：该内容需要放在在编辑器css或者查看器viewer css下方

tui.editor tui@editor tui markdown

http://blog.xqlee.com/article/2501151007356991.html