目录
- 一、富文本编辑器插件
- 1、tinymce 系列
- 2、quill 系列
- 二、Markdown 编辑器
- 1、marked 系列
- 三、富文本和markdown都支持的编辑器插件
- 1、prosemirror 系列
一、富文本编辑器插件
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:简单文档模式。