vue项目中使用 tinymce富文本编辑器

1.下载插件

  • vue2.0请下载以下版本

         "tinymce" : "5.1.0"
         "@tinymce/tinymce-vue" : "3.0.1"

  • vue3.0请下载以下版本

          "tinymce" : "5.10.3"
          "@tinymce/tinymce-vue" : "5.0.0"

  • 可结合下载

           npm install [email protected] @tinymce/[email protected] -S 

2.在node_modules依赖,会出现tinymce,找到之后,复制以下四个文件,放入public目录下,用tinymce包着是个4个文件

        icons   -   plugins  -  skins   -   themes

vue项目中使用 tinymce富文本编辑器_第1张图片

 3.themes文件中创建一个langs目录用于放入zh-Hans.js文件

这是一个汉化版,,在最一开始时富文本是英文需要转为中文

vue项目中使用 tinymce富文本编辑器_第2张图片

 下载解压后是一个langs文件夹里面有zh_CN.js文件,将langs文件夹放在我们刚才新建的static/tinymce文件目录下与skins文件夹同级

4. 封装的富文本

 

  

注意:图片如果上传不了可能是你没有图片的文件路劲

 在上面代码有一段:
import { Upload } from "@/utils/http";

这是上传的图片路劲封装于http里面,http除了图片还有封装的get,post请求
http文件:

/**上传图片
 * data -- 是图片数据
 */
function Upload(data: object) {
    return instance.post("../upload/admin", data)   //../上一级目录
}
export {
    Upload
}

5.在页面使用

  • 引入封装的文件



                    
                    

你可能感兴趣的:(vue.js,前端,编辑器)