tinymce编辑器怎么在vue项目中使用？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的文登网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
把文件放在static下，然后在index.html文件中引入这个文件
在其他子文件中引入这个
import tinymce from '../components/Tinymce';
components: {
tinymce
},然后就可以调用起这个组件了。
下面看下vue项目中使用tinymce编辑器的方法，具体内容如下所示：
第一步：npm install tinymce -S
第二步：创建组件
//增加模版
//在script中引入
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste";//这个到最下面那个为需要使用的工具栏模块
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";
第三步：对tinymce进行个性化配置
tinymceinit() {
const _this = this;
const setting = {
selector: "#tinymce",
language: "zh_CN",//语言设置中文
menubar: false,//去除文件栏
branding: false,//去除右下角的'由tinymce驱动'
elementpath: false,//左下角的当前标签路径
content_css: ["css文件路径"],//对编辑器内部需要的一些样式
language_url: "zh_CN.js文件的路径",//导入中文语言文件
skin_url: "../../../static/skins/lightgray",//在node_modules中tinymce文件夹中
setup: function(editor) {//设置自定义功能的按钮
editor.addButton("uploadimg", {//单个按钮，此处的uploading是该按钮的名称
icon: "image", //显示的图像
tooltip: "上传图片",//鼠标放上去后现在是内容
onclick: function() {}
});
editor.addButton("geshi", {//按钮列表，此处的geshi是该按钮的名称
text: "格式", //显示的文字
type: "menubutton",
menu: [
{
text: "标签",
onclick: function() {}
}
]
});
},
plugins:
"lists paste link image contextmenu wordcount colorpicker textcolor media imagetools",//对应上方import引入的文件，下面toolbar需要使用到
toolbar:
"geshi bold bullist numlist | uploadimg | alignleft aligncenter alignright alignjustify outdent indent"//定义工具栏
};
Object.assign(setting, _this.setting);
tinymce.init(setting);
},第四步：在watch中监听传入的value，并修改tinymce的内容
value(newV, oldV) {
tinymce.activeEditor.setContent(newV);
},其他：设置图片
第一种：使用tinymce提供的接口
images_upload_handler: function (blobInfo, success, failure) {
//blobInfo图片对象
uploadimg(){ //上传图片(自己写的方法)
success('图片的路径')
failure('错误提示')
}
}第二种：我自己使用的方法，简单说一下思路
1.使用setup自定义一个按钮，按钮的点击事件就是选择图片(参考input,type=file)，并上传
2.将服务器返回的路径包装成
3.将自己包装的img标签放入鼠标当前指针处
let dom = tinymce.activeEditor.dom;
tinyMCE.execCommand("mceInsertContent",false,dom.createHTML("img", {src: 路径}));看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
分享标题：tinymce编辑器怎么在vue项目中使用
转载来源：
http://bjjierui.cn/article/jgdejd.html
