标签：文本编辑 VUE min 随用 tinymce js file plugins plugin
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
配置灵活，界面简洁，支持自定义插件。
TinyMCE中文手册：http://tinymce.ax-z.cn
一、安装环境
1、安装需要的包
我使用的是v5版本的，需要搭配tinymce-vue包来使用
npm install tinymce/tinymce-vue@3.2.2
和
npm install tinymce@5.7.1
2、将安装的tinymce包copy放在public下
cp ./node_modules/tinymce ./public/tinymce
3、下载语言包
打开链接 http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js ，将zh_CN.js 另存到 public/tinymce/langs下，没有langs文件夹的可以手动创建一下
二、代码引用
附上我封装的组件，可以作为参考，上传文件的逻辑需要结合业务逻辑自行实现
<template>
<Editor :id="editorId" v-if="reFresh" v-model="newData" :init="init" />
</template>
<script>
// 引入组件
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'
import "tinymce/skins/ui/oxide/skin.min.css";
// 引入富文本编辑器主题的js和css
export default {
name: "TinymceEditor",
components: { Editor },
data() {
return {
init: { // 配置文件
base_url: '/tinymce',
menubar: false,
external_plugins: { //引入需要的插件
anchor: "/tinymce/plugins/anchor/plugin.min.js",
code: "/tinymce/plugins/code/plugin.min.js",
print: "/tinymce/plugins/print/plugin.min.js",
preview: "/tinymce/plugins/preview/plugin.min.js",
searchreplace: "/tinymce/plugins/searchreplace/plugin.min.js",
autolink: "/tinymce/plugins/autolink/plugin.min.js",
directionality: "/tinymce/plugins/directionality/plugin.min.js",
visualblocks: "/tinymce/plugins/visualblocks/plugin.min.js",
visualchars: "/tinymce/plugins/visualchars/plugin.min.js",
fullscreen: "/tinymce/plugins/fullscreen/plugin.min.js",
image: "/tinymce/plugins/image/plugin.min.js",
link: "/tinymce/plugins/link/plugin.min.js",
media: "/tinymce/plugins/media/plugin.min.js",
template: "/tinymce/plugins/template/plugin.min.js",
codesample: "/tinymce/plugins/codesample/plugin.min.js",
table: "/tinymce/plugins/table/plugin.min.js",
charmap: "/tinymce/plugins/charmap/plugin.min.js",
pagebreak: "/tinymce/plugins/pagebreak/plugin.min.js",
nonbreaking: "/tinymce/plugins/nonbreaking/plugin.min.js",
insertdatetime: "/tinymce/plugins/insertdatetime/plugin.min.js",
advlist: "/tinymce/plugins/advlist/plugin.min.js",
lists: "/tinymce/plugins/lists/plugin.min.js",
wordcount: "/tinymce/plugins/wordcount/plugin.min.js",
imagetools: "/tinymce/plugins/imagetools/plugin.min.js",
textpattern: "/tinymce/plugins/textpattern/plugin.min.js",
help: "/tinymce/plugins/help/plugin.min.js",
emoticons: "/tinymce/plugins/emoticons/plugin.min.js",
autosave: "/tinymce/plugins/autosave/plugin.min.js",
iframe: "/tinymce/plugins/iframe/plugin.min.js",
hr: "/tinymce/plugins/hr/plugin.min.js",
// formatpainter: "/tinymce/plugins/formatpainter/plugin.min.js",
},
language_url:
"/tinymce/langs/zh_CN.js", //语言文件
language: "zh_CN",
font_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
toolbar: [
"template code undo redo restoredraft cut copy paste pastetext forecolor backcolor bold italic underline strikethrough link unlink anchor alignleft aligncenter alignright alignjustify outdent indent formatselect fontselect fontsizeselect bullist numlist blockquote subscript superscript removeformat table image media charmap emoticons pagebreak insertdatetime print preview fullscreen formatpainter iframe hr",
],
templates: [],
// content_css : ['/layui/css/layui.css','/css/public.css?v=1'],
content_css: [],
height: 800, //编辑器高度
min_height: 200,
max_height: 600,
branding: false,
paste_data_images: true, // 允许粘贴图像
file_picker_types: "file image media",
images_upload_handler: (blobInfo, success) => {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST",`${process.env.VUE_APP_API_URL}/file/upload`); //上传文件的地址，需要替换成自己的
xhr.setRequestHeader("Authorization",window.localStorage.escourse_token);
xhr.onload = function () {
var json;
json = JSON.parse(xhr.responseText);
};
formData = new FormData();
formData.append("file", file, file.name);
formData.append("module", "post");
formData.append("file_source", "1");
// formData.append("token",window.localStorage.escourse_token)
xhr.send(formData);
xhr.onload = function () {
let json = JSON.parse(xhr.responseText);
if (json.code == 200) {
success(process.env.VUE_APP_API_URL + json.data.file.path)
return
}
};
},
media_url_resolver: function (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: "" });
}
},
file_picker_callback(cb, value, meta) {
//当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
console.log('meta', meta);
//创建一个隐藏的type=file的文件选择input
let input = document.createElement("input");
input.setAttribute("type", "file");
input.onchange = function () {
var xhr, formData;
let file = this.files[0]; //只选取第一个文件。如果要选取全部，后面注意做修改
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST",`${process.env.VUE_APP_API_URL}/file/upload`); //上传文件的地址，需要替换成自己的
xhr.setRequestHeader("Authorization",window.localStorage.escourse_token);
xhr.onload = function () {
var json;
json = JSON.parse(xhr.responseText);
};
formData = new FormData();
formData.append("file", file, file.name);
formData.append("module", "post");
formData.append("file_source", "1");
// formData.append("token",window.localStorage.escourse_token)
xhr.send(formData);
xhr.upload.onprogress = function () {
// 进度(e.loaded / e.total * 100)
// progress(e.loaded / e.total * 100);
};
// xhr.onerror = function () {
// //根据自己的需要添加代码
// console.log(xhr.status);
// return;
// };
xhr.onload = function () {
let json = JSON.parse(xhr.responseText);
if (json.code == 200) {
// if (meta.filetype == "media") {
cb(process.env.VUE_APP_API_URL + json.data.file.path, { text: json.data.file.name })
// }
// if (meta.filetype == "file") {
// cb(json.data.url, { text: json.data.name })
// }
return
}
};
};
//触发点击
input.click();
},
},
editorId: this.id,
newData: this.data,
reFresh:false,
laws:[]
};
},
created(){
this.getBandData();
},
mounted() {
tinymce.init({});
},
props: {
data: String,
onChange: Function // 回调函数，将新修改的内容做为第一个参数返回
},
watch: {
newData: 'updateData',
data: 'uptData',
"init.templates"(newValue) { // 如果配置发生改变，则刷新编辑器
this.reFresh = false;
this.$nextTick(() => {
this.reFresh = true;
});
},
},
methods: {
async getBandData() {
let urlResult = await getTemplates(); //这边我是自己封装了个插件，通过getTemplates接口，从后端读取模板，再显示到编辑器插件上，如果不需要可以删掉
if (urlResult.code == 200) {
let array = urlResult.data;
let arr = [];
for (let index = 0; index < array.length; index++) {
const element = array[index];
let data = {
title: element.name,
content: element.html,
description: element.html,
// description: "<img src='"+this.urlConfig.adminUrl + element.thumbnail+"'/>",
};
arr.push(data);
}
this.laws = arr; //得到的数据赋值给laws
this.init.templates = this.laws;
}
},
addContent(html) {
console.log('html', html)
this.newData = this.newData + html
},
uptData() {
this.newData = JSON.parse(JSON.stringify(this.data))
},
updateData() {
this.onChange(this.newData)
},
clear() {
this.editorValue = "";
},
},
};
</script>
在页面中引用
<template>
<Editor v-bind:data="data" :onChange="onchange"></Editor>
</template>
import Editor from "../../../components/tinymce/editor";
export default {
data() {
return {
data:''
};
},
components: {
Editor
},
methods: {
onchange(e){
this.data = e
}
}
}
标签：文本编辑,VUE,min,随用,tinymce,js,file,plugins,plugin 来源： https://www.cnblogs.com/iwillrich/p/16404236.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。