最近在用vue + element-ui对公司的后台管理系统进行构建,听说这个后台管理系统是零几年的产物,历史古老,看界面就看得出是前前端不分离时期,PHP前端工程师做的,不符合我们95后程序员的审美,而且上面的富文本编辑器只是太老的,而且很难用,没有视频上传功能,而且也没有上传图片功能,文本插入图片是用base64插入的,难用界面还丑。在建构管理后台,我经常在找一个逼格高的,好用的富文本编辑器,经过这几天的追寻,我总算找到了一个完美的编辑器,它就是——Quill。

  UEditor

  在找到这个编辑器的时侯,我先是试用了百度的UEditor。UEditor 是由百度「FEX后端研制团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户感受等特性,开源基于MIT合同,允许自由使用跟更改代码。

  这个编辑器的特点是功能多,可以上传图片视频至服务器上,但是界面很老,不耐看,功能劣势还有,例如上传图片跟视频要前端配合改插口typecho 富文本编辑器,不然弄不了,我去找前端,后端不肯配合我,真使人头大,所以我舍弃这个富文本编辑器了。

  UEditor

  wangEditor

  wangEditor是一个国人开发的开源的 轻量级 web 富文本编辑器 ,配置便捷,使用简略。界面超级简约,但是我不太喜欢这个界面,而且也不支持上传图片跟视频。所以我舍弃了。

  wangEditor

  TinyMCE

  TinyMCE是可订制,灵活的一款富文本编辑器。界面设计太美观,功能只是超级强悍的,支持扩充许多初级功能跟附加组件,支持拼写检测typecho 富文本编辑器,图片视频上传等等,应该是现在后端最强的编辑器了,这个编辑器哪些都好,但是讨钱,公司太抠,不会忍心出一分钱的,哈哈哈。

  TinyMCE

  CKEditor

  CKEditor虽说不错,但是功能比较基础,有图片上传功能,没有视频上传功能,但是它有行内编辑功能,还可以拖曳缩小图片,这个功能还是很强悍的,至少其他编辑器似乎都没有这个功能。

  CKEditor

  Quill

  Quill,用上去最舒服的编辑器,想要的功能都有,搭配丰富的插件使用上去酸溜溜,界面简约,美观,功能其实不是这些,但是不慌,我们可以给它搭配各种各样的插件,拓展功能,而且这个编辑器开源免费,插件也好多。

  搭配quill-video-image-module插件就可以实现视频上传,图片上传至服务器,而且视频还是用video标签插入的,而不是iframe,还实现了英文提示框,中文功能描述。quill及其功能拓展插件使用方式如下:

  <pre class="syl-page-code hljs coffeescript">`npm i vue-quill-editor
npm i quill
npm i quill-video-image-module`</pre>

  <pre class="syl-page-code hljs xml">`

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
import {

quillEditor,
Quill

} from 'vue-quill-editor';
import {

container,
addQuillTitle

} from 'quill-video-image-module';
import {

ImageExtend,
QuillWatch

} from 'quill-video-image-module';
import {

VideoExtend,
QuillVideoWatch

} from 'quill-video-image-module'

// 引入video模块并注册
import video from 'quill-video-image-module/video'
Quill.register(video, true)

Quill.register('modules/ImageResize', ImageResize)
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/VideoExtend', VideoExtend)
export default {

components: {
  quillEditor
},
data() {
  return {
    content: '',
    // 富文本框参数设置
    editorOption: {
      modules: {
        ImageResize: {},
        ImageExtend: {
          loading: true, // 可选参数 是否显示上传进度和提示语
          name: 'img', // 图片参数名
          size: 1, // 可选参数 图片大小,单位为M,1M = 1024kb
          action: 'http://127.0.0.1:5000/upload/img', // 服务器地址, 如果action为空,则采用base64插入图片
          // response 为一个函数用来获取服务器返回的具体图片地址
          // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
          // 则 return res.data.url
          response: res => {
            return res.data.url;
          },
          headers: () => {}, // 可选参数 设置请求头部
          start: () => {}, // 可选参数 自定义开始上传触发事件
          end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败
          error: () => {}, // 可选参数 自定义网络错误触发的事件
          change: () => {
            formData.append('key', localStorage.getItem('token'));
        }, // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
          sizeError: () => {
            alert('图片不能大于1M')
          }
        },
        VideoExtend: {
          loading: true,
          name: 'img',
          size: 100, // 可选参数 视频大小,单位为M,1M = 1024kb
          action: 'http://127.0.0.1:5000/upload/img', // 视频上传接口
          headers: (xhr) => {
            // set custom token(optional)
          },
          change: (xhr, formData) => {
    formData.append('key', localStorage.getItem('token'));
      },
          response: (res) => {
            // video uploaded path
            // custom your own
            return res.data.url;
          },
          sizeError: () => {
            alert('视频不能大于100M')
          }
        },
        toolbar: {
          container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置
          handlers: {
            image: function() {
              // 劫持原来的图片点击按钮事件
              QuillWatch.emit(this.quill.id);
            },
            video: function() {
              QuillVideoWatch.emit(this.quill.id)
            }
          }
        }
      }
    }
  };
},
methods: {},
created() {

},
mounted() {
  addQuillTitle();
}

};

.createArticle {

padding: 40px 40px;

}

.ql-editor {

min-height: 800px;

}
`</pre>

  如果这篇文章正好能帮至你,麻烦顺手点个赞吧,谢谢了。

最后修改:2020 年 12 月 15 日 12 : 31 AM
如果觉得我的文章对你有用,请随意赞赏