vue富文本编辑器插件,vue textarea做富文本编辑器

Vue:富文本编辑器quill-editor上传图片导致url太长导致请求报错_百度...

最近工作中需求使用一款富文本编辑器，经过再三比较选择了vue-quill-editor，之所以选择vue-quill-editor，是看上了它的轻量以及外观简洁的优势。

所以我把项目下的node_modules文件删除，然后直接安装quill依赖（执行npm install vue-quill-editor --save）。然后npm run dev 运行项目，不影响之前vue项目的使用和运行，quill的富文本编辑器也可以用了。

回顾富文本编辑器的发展历程，不难发现：富文本编辑器的结构脱离不了模型、视图、控制器这三大模块。

富文本编辑器应该如何使用?

1、编辑器中输入公式一般是使用TeX公式语法插入字符，系统会自动生成对应的图片供用户使用。下文中提到的Markdown也支持TeX公式。实时保存 自动保存是指编辑器每隔3-5s就自动保存一次，可以保存在用户本地，也可以保存服务端。

2、第一步需要引入UEditor的源文件，和jquery文件，来对编辑器进行支持。如果看到图二的效果则说明部署成功咯，接下来我们就可以根据自己的实际需求来进行场地参数。

3、下载.NET版本的百度富文本编辑器，前往 下载.NET版本百度富文本框 解压下载的.zip压缩包，将utf8-.net文件夹名称改为：ueditor，复制到MVC根目录下面。

4、可以通过纯文本粘贴功能，将复制的标签转换成纯文本格式，再根据需要添加格式和样式。另外，也可以使用html清理工具，将复制的标签中的不必要的元素和样式进行过滤和清理，保留必要的内容和样式。

vue使用froala-editor富文本编辑器

在项目需要用到富文本编辑器时，自己也筛选过不少插件，最终选择了froala-editor，UI简单功能强大，官网也列出了很多国外大佬在使用，自己实战后确实感觉比其他的富文本编辑器好。

首先，在utiljs文件中，从里面解构出message，这个东西看起来是个方法，里边实际上是一个组件。其次，把这个组件使用Vue单独进行渲染，渲染完之后单独挂在到一个节点上。

Ⅴue_flow_editor的使用非常的方便的，非常的实用，是一个不错的操作。

所以我把项目下的node_modules文件删除，然后直接安装quill依赖（执行npm install vue-quill-editor --save）。然后npm run dev 运行项目，不影响之前vue项目的使用和运行，quill的富文本编辑器也可以用了。