vue使用tinymce 富文本

第一步：安装

官网地址：tinymce  

安装插件，如果安装不成功的话，可以先把它写进package.json里面再npm install一下

npm install @tinymce/tinymce-vue -S  //我安装的是2.0.0版本
npm install tinymce -S  //我安装的是5.0.3版本

安装完之后，默认语言是英语，要中文的话得再下载个语言包，语言包地址

第二步：配置与使用

在node_modules 中找到 tinymce/skins目录，把整个目录复制放到自己项目的public目录下的文件夹tinymce（新建的一个文件夹，方便管理），然后再把下载的语言包解压放到这个文件夹下。

页面中使用，先初始化配置，具体配置和插件可以去官网查看，我这里只列出常用配置和上传图片的插件。

<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>

//script
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import 'tinymce/plugins/image'// 插入上传图片插件

//data里面写入初始配置
init: {        
    language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径        
    language: "zh_CN", //语言        
    skin_url: "/tinymce/skins/ui/oxide", // skin路径        
    height: 300, //编辑器高度        
    menubar: false,// 隐藏最上方menu菜单        
    paste_data_images: true, // 允许粘贴图像        
    // 注册功能组件        
    plugins: "image",        
    // 注册工具栏        
    toolbar:[          'newdocument undo redo | formatselect visualaid|cut copy paste selectall image| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat '        ],        
    images_upload_handler(blobInfo, success, failure) {          
        that.tinyInit(blobInfo, success, failure)        
    }      
}

//mounted里初始化
tinymce.init({   
    selector: '#tinymce'
})

//图片上传插件处理方法
tinyInit(blobInfo, success, failure) {//      
    let formData = new FormData()      
    formData.append('img_file',blobInfo.blob())      
    formData.append('type', 'image')      
    $axios({        
        url: '',        
        method: 'post',        
        data:formData      
    })      
    .then(res=>{        
        console.log(res)        
        success(接口返回的图片地址)      
    })      
    .catch(err=>{        
        failure('上传失败')      
    })    
}

上面列出的基本就可以满足大部分的需求了