编辑器插件汇总

一、富文本编辑器插件

1、tinymce 系列

• tinymce：世界排名第一的开源富文本编辑器。（TinyMCE 中文文档）
  • react-tinymce：React TinyMCE 组件。
  • Vue-tinymce：Vue 2.1x 上的 Tinymce 支持。
  • @tinymce/tinymce-vue：这个包是围绕TinyMCE 的一个瘦包装器，使其更容易在 Vue 应用程序中使用。

【案例】
tinymce 的应用：拷贝外部图片到 tinymce 的富文本编辑器中
问题描述：想要将粘贴进来的图片的url地址替换成本项目的地址（比如：将 http://www.baidu.com/1.png 替换为 http://myNet.com/1.png）。
解决思路：用拷贝进来的图片资源新建一个img标签，然后将原img标签删除，将新的img标签插入到页面中。
代码实现：

function onPaste(e) {
	const blob = item.getAsFile();
    const reader = new FileReader();
    reader.onload = function(event) {
        const range = this.selection.getRng();
    	range.selectNode(this.getDoc().querySelector("img[data-mce-src]"))
    	range.deleteContents()
    	// 粘贴上传图片的接口（返回新的url）
    	api.uploadPasteImage(blob).then((url) => {
        	const newNode = this.getDoc().createElement ( "img" );
        	newNode.src = url;
        	range.insertNode(newNode);
    	}).catch(err => {
        	debugger
    	});
    };
    reader.readAsDataURL(blob);
}

问题描述：经过上一步处理后，发现：

• 通过右击选择复制的图片可以达到预期目的。
• 但是通过ctrl+c复制的图片仍然是无效的。
  问题解析：原来，通过ctrl+c复制的内容，tinymce读到的统一是text/html类型，而不是imageXXX类型
  解决思路：根据拷贝的不同的文件的类型来分别处理，若是右击选择复制的图片仍采用上面的办法，若是通过ctrl+c复制的图片，则采用新的处理方式——去除拷贝进来的资源里的img标签，然后将处理后的资源添加进tinymce的dom里。
  代码实现：

function onPaste(e) {
    if(!e.clipboardData) { return }
    const list = [...e.clipboardData.items] || [];
    const fileList = list.filter(item => item.kind === 'file' && item.type.indexOf("image") !== -1) || [];
    if (fileList.length) {
        fileList.forEach(item => {
            const blob = item.getAsFile();
            const reader = new FileReader();
            reader.onload = function(event) {
                const range = this.selection.getRng();
    			range.selectNode(this.getDoc().querySelector("img[data-mce-src]"))
    			range.deleteContents()
    			// 粘贴上传图片的接口（返回新的url）
    			api.uploadPasteImage(blob).then((url) => {
        			const newNode = this.getDoc().createElement ( "img" );
        			newNode.src = url;
        			range.insertNode(newNode);
    			}).catch(err => {
        			debugger
    			});
            };
            reader.readAsDataURL(blob);
        });
    } else {
        list.forEach(item => {
        	const imgReg = /<img.*?(?:>|\/>)/i;
            if (item.kind === "string" && item.type === "text/html") {
                // 对 ctrl+c 复制的图片拦截处理
                item.getAsString(str => {
                    if (imgReg.test(str)) {
                        const range = this.selection.getRng();
                        range.selectNodeContents(this.getDoc().body)
                        range.deleteContents()
                        while (imgReg.test(str)) {
                            str = str.replace(imgReg, '');
                        }
                        let new_element = document.createRange().createContextualFragment(str);
                        this.getDoc().body.appendChild(new_element);
                    }
                })
            }
        })
    }
}

2、quill 系列

• quill：QuillJS是为兼容性和可扩展性而构建的现代富文本编辑器。（QuillJS 中文文档）
  • React-Quill：基于 Quill、适用于 React 的富文本编辑器。
    - react富文本编辑器react-quill的使用
  • vue-quill-editor：基于 Quill、适用于 Vue 的富文本编辑器。
    - Vue-Quill-Editor富文本编辑器的使用教程

二、Markdown 编辑器

1、marked 系列

• marked：快速的、轻量级的 Markdown 的低级编译器，同时实现支持的风格和规范的所有降价功能。基于 commonmark（Markdown 语法的合理化版本）。
  - marked.js简易手册
  - Vue中使用markdown
• react-markdown：将 Markdown 渲染为纯 React 组件。基于 commonmark。
  - react-markdown | 学习在react中使用markdown
  - react-markdown 使用总结
• markdown-it：一款快速且易于扩展的markdown解析器。（markdown-it 中文文档）
  - 使用markdown-it插件
  - markdown-it 原理浅析
  • vue-markdown：适用于 Vue 的强大且高速的 Markdown 解析器。基于markdown-it。
  • vue-meditor：一款markdown编辑器，除常见markdown语法外，支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。基于marked 和 markdown-it。
    - vue使用markdown
  • markdown-it-vuese：借助这个插件，你可以通过下述的语法在导入已经存在的 *.vue 文件的同时，使用 Vuese 自动生成文档。基于markdown-it。
  • mavon-editor：一款markdown编辑器。基于markdown-it。
    - mavon-editor 使用教程
  • Le-markdown-editor：一款Vue markdown编辑器。基于markdown-it。
    - le-markdown-editor 使用
  • @npmcorp/marky-markdown：marky-markdown是一个用 NodeJS 编写的 markdown 解析器。基于markdown-it。
• turndown：Turndown 是一个 HTML 转 Markdown 的 JavaScript 库。
  - 如何使用Turndown使用JavaScript将HTML转换为Markdown

【拓展】
markdwon 扩展插件：若要支持数学公式，需要在 markdwon 上使用额外的插件：

• 支持数学公式（markdwon 本身不支持数学公式）：
  • mathjax：一个开源的 JavaScript 显示引擎，适用于 LaTeX、MathML 和 AsciiMath 表示法，适用于所有现代浏览器。
    - mathjax 官网
    - mathjax 3.2中文文档
  • node-latex：在 Node.js 中使用 LaTeX 生成 PDF 的小包装器。
• remark-gfm：扩展markdown使用，让你可以在markdown中使用表格等能被编译。
• raw-loader：静态资源加载器。
• rehype-raw：markdown中书写html，且被编译运行。

三、富文本和markdown都支持的编辑器插件

1、prosemirror 系列

prosemirror：

• prosemirror-commands：基本编辑命令。
• prosemirror-history：历史记录。
• prosemirror-inputrules：输入宏。
• prosemirror-keymap：键绑定。
• prosemirror-markdown：支持Markdown编辑。
• prosemirror-model：定义了编辑器的 Document Model，它用来描述编辑器的内容。
• prosemirror-state：提供了一个描述编辑器完整状态的单一数据结构, 包括编辑器的选区操作, 和一个用来处理从当前 state 到下一个 state 的一个叫做 transaction 的系统。
• prosemirror-tables：支持表格。
• prosemirror-transform：包含了一种可以被重做和撤销的修改文档的功能, 它是 prosemirror-state 库的 transaction 功能的基础, 这使得撤销操作历史记录和协同编辑成为可能。
• prosemirror-utils：prosemirror 的公共方法库。
• prosemirror-view：用来将给定的 state 展示成相对应的可编辑元素显示在编辑器中, 同时处理用户交互。
• prosemirror-collab：协作编辑。
• prosemirror-schema-basic：简单文档模式。

【参考】
prosemirror 的教程
干货｜编辑器是前端天坑？聊聊富文本编辑器（Prosemirror）
富文本编辑器Prosemirror - 入门