tinymce編輯器怎么在vue項目中使用？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計,安多網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:安多等地區(qū)。安多做網(wǎng)站價格咨詢:13518219792

          把文件放在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"//定義工具欄
   };
   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: 路徑}));

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：tinymce編輯器怎么在vue項目中使用-創(chuàng)新互聯(lián)
本文來源：http://jinyejixie.com/article10/jgogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、微信公眾號、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)