vue 引入tinymce富文本框

第一步：package.json 中的dependencies加入

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.6",

执行 npm i

第二步：node_modules 中找到tinymce 中skins文件夹，复制到static中，然后从tinymce官网下载中文js文件

第三步：准备好之后就可以开始啦

 <div class="lists">
     <span @click="setContent('#姓名#')">#姓名#</span>
 </div>
<div class="tinymceBox">
  	<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
</div>

import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/paste";

data(){
	return  {
	tinymceHtml: "",
	init: {
      convert_urls: false,
       language_url: "./static/tinymce/zh_CN.js",
       language: "zh_CN",
       skin_url: "./static/tinymce/skins/ui/oxide",
       content_css: `./static/tinymce/skins/content/default/content.css`,
       height: 400,
       menubar: false,
       plugins: ["link lists code table  wordcount  image paste"],
       toolbar: [
         "bold italic underline | fontsizeselect forecolor | image table | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent |  undo redo"
       ],
       branding: false,
       paste_data_images: true,
       images_upload_handler: (blobInfo, success, failure) => {
         var fd = new FormData();
         fd.append("file", blobInfo.blob());
         fd.append("type", 6);
         axios({
           url: this.action,
           headers: { "Content-Type": "multipart/form-data" },
           method: "post",
           data: fd
         }).then(res => {
           success(res.data.data.url);
         });
       }
     }
  }
}
components: { Editor },
mounted:{
	tinymce.init({});
},
methods:{
//点击span标签可以在富文本框添加文本
	setContent(val) {
      tinymce.activeEditor.execCommand("mceInsertContent", false, val);
    },
}

获取富文本框内容的方法

tinymce.activeEditor.getContent()

给tinymceHtml赋值可以回显内容

效果：