tinymce编辑器怎么在vue项目中使用？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联是一家专注于成都网站设计、网站制作、
外贸营销网站建设与策划设计,安多网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:安多等地区。安多做网站价格咨询:13518219792
把文件放在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: 路径}));看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：tinymce编辑器怎么在vue项目中使用-创新互联
文章链接：
http://cdxtjz.cn/article/jgogo.html
