1、vue2.0的只能使用tinymce-vue3版本的，使用高版本的tinymce-vue会报错。
npm install @tinymce/tinymce-vue@3.0.1 -s
2、把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面
3、新建一个TinyMce.vue文件，复制以下代码进去
<template>
<div>
<editor
api-key="y0wryxiphozxaj3spgx6ivap7k2t3zyvaqwgrxrgcobdacsh"
v-model="content"
:initial-value="value"
@onChange="changeValue"
:init="{
element_format: 'html',
height: 400,
menubar: false,
language: 'zh_CN',
forced_root_block: 'div',
media_url_resolver: mediaUrlResolver,
images_upload_handler: uploadImg,
file_picker_callback: uploadFile,
media_live_embeds: true,
file_picker_types: 'media',
fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
font_formats: '微软雅黑;宋体;黑体;仿宋;楷体;隶书;幼圆',
plugins: [
' advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
' fontsizeselect fontselect | media link autolink image | table |undo redo | formatselect | bold italic forecolor backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | help',
}" /> </div></template><script>import Editor from "@tinymce/tinymce-vue";export default { name: "TinyMce", props: { value: { type: String, value: "" } }, model: { prop: "value", event: "change" },
components: {
editor: Editor
}, data ()
{
return {
content: "",
URL: ''
};
},
mounted () {
let self = this
//tinymce.init()
},
created () {
this.URL = sessionStorage.getItem("CloudnewUrl");
},
methods: {
changeValue (evt) {
const value = evt.level.content;
this.$emit("change", value.replace(/(<p><br><\/p>){1,}$/g, ""));
},
// uploadImg(...args) {
// console.log(args);
//
},
upload (blob, success, failure) {
let xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST", this.URL + "/cloud/message/images/upload");
xhr.onload = function () {
let json;
if (xhr.status != 200) {
failure && failure("HTTP Error: " + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.data.imgPath != "string") {
failure && failure("Invalid JSON: " + xhr.responseText);
return;
}
success(json.data.imgPath);
};
formData = new FormData();
formData.append("images", blob, blob.name);
xhr.send(formData);
},
uploadImg: function (blobInfo, success, failure) {
this.upload(blobInfo.blob(), success, failure);
},
uploadFile (cb, value, meta) {
// let filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'; // const map = { // image: '.jpg, .jpeg, .png, .gif', // media: '.mp3, .mp4', // }
// if (map[meta.filetype]) {
// filetype = map[meta.filetype] // }
if (meta.filetype !== "media") {
console.log("非媒体资源，");
return;
}
const filetype = "video/*";
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", filetype);
input.click();
input.onchange = () => {
const file = input.files[0];
this.uploadMedia(file, cb);
};
},
uploadMedia (blob, success, failure) {
let self = this;
let xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST", this.URL + "/cloud/message/images/upload");
xhr.onload = function () {
let json;
if (xhr.status != 200) {
failure && failure("HTTP Error: " + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.data.imgPath != "string") {
failure && failure("Invalid JSON: " + xhr.responseText);
return;
}
let localObjUrl = json.data.imgPath;
// self.content = (
// `<p>
//
<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${localObjUrl} data-mce-html="%20"> // <video src=${localObjUrl} width="100%" controls="controls"><source src=${localObjUrl} /></video><span class="mce-shim"></span> // </span> // </p>` // ) success(json.data.imgPath);
//success('https://fscdn.zto.com/fs8/M05/5C/23/wKhBEF7ZFzuANmj_AGE8d6WihfE721.mp4');
};
formData = new FormData();
formData.append("images", blob, blob.name);
xhr.send(formData); }, mediaUrlResolver (data, resolve) {
try { let videoUri = encodeURI(data.url);
let embedHtml = `<p>
<span class="mce-object mce-object-video" data-mce-selected="1" data-mce-object="video" data-mce-p-width="100%" data-mce-p-height="auto" data-mce-p-controls="controls" data-mce-p-controlslist="nodownload" data-mce-p-allowfullscreen="true" data-mce-p-src=${videoUri} > <video src=${data.url} width="100%" height="auto" controls="controls" controlslist="nodownload">
</video> </span>
</p> <p style="text-align: left;"></p>`;
resolve({ html: embedHtml });
} catch (e) { resolve({ html: "" }); } } }};</script>
