1. Only tinymce-Vue 3 version can be used for VUe2.0. Using tinymce-Vue of a higher version will cause an error.

NPM install @ tinymce/[email protected] -sCopy the code

2. Copy all the files in node_modules\tinymce, including the tinymce folder, to the static folder

3. Create a new tinymce. vue file and copy the following code

<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: 'Microsoft Yahei; Song typeface. Black body; Imitation song dynasty style typeface. Regular script. Official script. End ', the 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(" non-media resources, "); 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>Copy the code