开发环境

1. vscode

开发语言

1. vue
2. javaScript

插件安装

1. npm install tinymce -S
2. 可以使用里面的文件， 下载后可以在node_modules 里面查看如下未目录结构

3. 可以将整个结构拷在static里面，为了节省打包后的文件大小可以将tinymce.min.js以cdn方式导入放在index.html中<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.5/tinymce.min.js"></script>
4. 附上封装的代码可以直接导入使用<template>

<div>

<textarea :id="Id"></textarea>

</div>
</template>
<script>
import "tinymce/langs/zh_CN.js"; // 引入中文包地址
// import axios from "axios"; // 可导入axios文件进行上传图片
export default {
data() {

const Id = Date.now();
return {Id: Id, // 构造tinymce的选择器Editor: null,tinymceConfig: {// GLOBALheight: 500,theme: "modern",menubar: false,toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | paste code  link | undo redo | fullscreen `,plugins: `pasteimportcssimagecodetableadvlistfullscreenlinkmedialiststextcolorcolorpickerhrpreview`,// CONFIGforced_root_block: "p",force_p_newlines: true,importcss_append: true,skin_url: "/static/tinymce/skins/lightgray", // 可以把node_modules 下面的文件导入到static然后引入到这里language_url: "/static/tinymce/langs/zh_CN.js", // 导入中文包language: "zh_CN",// CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证前后一致， `table`和`img`的问题基本就靠这个来填坑了content_style: `*                         { padding:0; margin:0; }html, body                { height:100%; }img                       { max-width:100%; display:block;height:auto; }a                         { text-decoration: none; }iframe                    { width: 100%; }p                         { line-height:1.6; margin: 0px; }table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }.mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }ul,ol                     { list-style-position:inside; }`,insert_button_items: "image link | inserttable",// CONFIG: Pastepaste_retain_style_properties: "all",paste_word_valid_elements: "*[*]", // word需要它paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能paste_convert_word_fake_lists: false, // 插入word文档需要该属性paste_webkit_styles: "all",paste_merge_formats: true,nonbreaking_force_tab: false,paste_auto_cleanup_on_paste: false,// CONFIG: Fontfontsize_formats: "10px 11px 12px 14px 16px 18px 20px 24px",// CONFIG: StyleSelectstyle_formats: [{title: "首行缩进",block: "p",styles: { "text-indent": "2em" }},{title: "行高",items: [{ title: "1", styles: { "line-height": "1" }, inline: "span" },{title: "1.5",styles: { "line-height": "1.5" },inline: "span"},{ title: "2", styles: { "line-height": "2" }, inline: "span" },{title: "2.5",styles: { "line-height": "2.5" },inline: "span"},{ title: "3", styles: { "line-height": "3" }, inline: "span" }]}],// FontSelectfont_formats: `微软雅黑=微软雅黑;宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Andale Mono=andale mono,times;Arial=arial, helvetica,sans-serif;Arial Black=arial black, avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats`,// Tabtabfocus_elements: ":prev,:next",object_resizing: true,// Imageimagetools_toolbar:"rotateleft rotateright | flipv fliph | editimage imageoptions"}
};

},
props: {

value: {default: "",type: String
},
config: {type: Object,default: () => {return {theme: "modern",height: 300};}
},
// 该参数就是上传文件的url
url: {default: "",type: String
},
//上传文件类型
accept: {default: "image/jpeg, image/png, image/jpg,",type: String
},
maxSize: {default: 2097152,type: Number
},
withCredentials: {default: false,type: Boolean
}

},
mounted() {

this.init();

},
beforeDestroy() {

// 销毁tinymce
//   window.tinymce.remove(`$#{this.Id}`)

},
methods: {

init() {const self = this;this.Editor = window.tinymce.init({// 默认配置...this.tinymceConfig,// 图片上传images_upload_handler: function(blobInfo, success, failure, progress) {if (blobInfo.blob().size > self.maxSize) {failure("文件体积过大");}if (self.accept.indexOf(blobInfo.blob().type) > -1) {uploadPic();} else {failure("图片格式错误");}function uploadPic() {// 用axios 上传文件// progress(0);// let param = new FormData();// let config = {//   headers: {//     "Content-Type": "multipart/form-data"//   }// };// param.append("file", blobInfo.blob());// console.log('axios', axios);// axios//   .post("http://operate-dev.winchaingroup.com/api/upload", param, config)//   .then(response => {//     success(response.data.data);//     self.$emit("on-upload-complete", [json, success, failure]);//     progress(100);//   })//   .catch(error => {//     console.log("err", error);//   });// 用ajax上传文件const xhr = new XMLHttpRequest();let createFrom = document.createElement("form");let FromData = new FormData(createFrom);xhr.withCredentials = self.withCredentials;xhr.open("POST", self.url);xhr.onload = function() {if (xhr.status !== 200) {// 抛出 'on-upload-fail' 钩子failure("上传失败: " + xhr.status);return;}const json = JSON.parse(xhr.responseText);// success函数中的参数就是你上传文件返回的urlsuccess(json.data);progress(100);// 抛出 'on-upload-complete' 钩子};FromData.append("file", blobInfo.blob());xhr.send(FromData);}},// prop内传入的的config...this.config,// 挂载的DOM对象selector: `#${this.Id}`,setup: editor => {// 抛出 'on-ready' 事件钩子editor.on("init", () => {self.loading = false;editor.setContent(self.value);});// 抛出 'input' 事件钩子，同步value数据editor.on("input change undo redo", () => {});}});
}

}
};
</script>

5. 在组件中导入即可使用import tinymce from './tinymce/index'

引用

https://www.bootcdn.cn/tinymce/     // tinymce地址