Vue项目中使用Tinymce

 
   

前言

最近因为公司项目的后台管理端需要实现编辑器功能, 一方面满足编辑各类文章内容需求,另一方面要自己编辑一些课程相关的介绍,于是就花了一些时间对比体验现有的一些开源的编辑器。

编辑器之间的简单比较

我们项目要解决的需求说复杂也不复杂,但是却很烦人, 比如:

  1. 实现图片上传(基础功能)

  2. 模拟手机预览功能(基础功能)

  3. 编辑的内容在app中显示要适配

  4. 从135编辑器, 秀米等等编辑器拷贝过来的内容要正常显示并且排版还要保持,还要将这些第三方图片上传到自己服务(怕第三方下架图片)

引入并初始化

项目采用[email protected]构建的, 将TinyMCE下载放在index.html同级目录下, 并在index.html中引入TinyMCE

script>


引入文件后,在html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换的元素,所以我们只需要将包含选择器的对象传递给TinyMCE.init(),代码如下: