vue項目中使用tinymce編輯器的步驟詳解
更新時間：2018年09月11日 15:47:18 作者：死亡的挽歌
本文分步驟給大家介紹了vue項目中使用tinymce編輯器的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
Tinymce富文本也是一款很流行編輯器
把文件放在static下，然后在index.html文件中引入這個文件
<script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce>
在其他子文件中引入這個
import tinymce from '../components/Tinymce';
components: {
tinymce
},
然后就可以調(diào)用起這個組件了。
下面看下vue項目中使用tinymce編輯器的方法，具體內(nèi)容如下所示：
第一步：npm install tinymce -S
第二步：創(chuàng)建組件
//增加模版 <template> <div> <textarea :value="value"></textarea> </div> </template> //在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進(jìn)行個性化配置
tinymceinit() {
const _this = this;
const setting = {
selector: "#tinymce",
language: "zh_CN",//語言設(shè)置中文
menubar: false,//去除文件欄
branding: false,//去除右下角的'由tinymce驅(qū)動'
elementpath: false,//左下角的當(dāng)前標(biāo)簽路徑
content_css: ["css文件路徑"],//對編輯器內(nèi)部需要的一些樣式
language_url: "zh_CN.js文件的路徑",//導(dǎo)入中文語言文件
skin_url: "../../../static/skins/lightgray",//在node_modules中tinymce文件夾中
setup: function(editor) {//設(shè)置自定義功能的按鈕
editor.addButton("uploadimg", {//單個按鈕，此處的uploading是該按鈕的名稱
icon: "image", //顯示的圖像
tooltip: "上傳圖片",//鼠標(biāo)放上去后現(xiàn)在是內(nèi)容
onclick: function() {}
});
editor.addButton("geshi", {//按鈕列表，此處的geshi是該按鈕的名稱
text: "格式", //顯示的文字
type: "menubutton",
menu: [
{
text: "標(biāo)簽",
onclick: function() {}
}
]
});
},
plugins:
"lists paste link image contextmenu wordcount colorpicker textcolor media imagetools",//對應(yīng)上方import引入的文件，下面toolbar需要使用到
toolbar:
"geshi bold bullist numlist | uploadimg | alignleft aligncenter alignright alignjustify outdent indent"http://定義工具欄
};
Object.assign(setting, _this.setting);
tinymce.init(setting);
},
第四步：在watch中監(jiān)聽傳入的value，并修改tinymce的內(nèi)容
value(newV, oldV) {
tinymce.activeEditor.setContent(newV);
},
其他：設(shè)置圖片
第一種：使用tinymce提供的接口
images_upload_handler: function (blobInfo, success, failure) {
//blobInfo圖片對象
uploadimg(){ //上傳圖片(自己寫的方法)
success('圖片的路徑')
failure('錯誤提示')
}
}
第二種：我自己使用的方法，簡單說一下思路
1.使用setup自定義一個按鈕，按鈕的點擊事件就是選擇圖片(參考input,type=file)，并上傳
2.將服務(wù)器返回的路徑包裝成<img src='返回的路徑'>
3.將自己包裝的img標(biāo)簽放入鼠標(biāo)當(dāng)前指針處
let dom = tinymce.activeEditor.dom;
tinyMCE.execCommand("mceInsertContent",false,dom.createHTML("img", {src: 路徑}));
總結(jié)
以上所述是小編給大家介紹的vue項目中使用tinymce編輯器的步驟詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Vue3?中有場景是?reactive?能做而?ref?做不了的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在Vue項目開發(fā)中,數(shù)據(jù)可視化是一項重要的任務(wù),Echarts是一個由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue3腳手架簡單靜態(tài)路由,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
組件是什么？組件是用基礎(chǔ)的元素組成的復(fù)雜的、可以重復(fù)使用的代碼單元，就相當(dāng)于疊疊樂一樣的快件，可以將這些復(fù)用的代碼封裝其起來構(gòu)成的組件可需要的時候進(jìn)行調(diào)用2022-08-08
vue3?setup語法糖下父組件如何調(diào)用子組件
這篇文章主要介紹了vue3?setup語法糖下父組件如何調(diào)用子組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue+canvas實現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要給大家介紹了Vue.js在使用中的一些注意知識點，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要給大家介紹了關(guān)于vue3.0路由自動導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03