tinymce編輯器怎么在vue項目中使用

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

          把文件放在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
 },

然后就可以調用起這個組件了。

下面看下vue項目中使用tinymce編輯器的方法，具體內容如下所示：

第一步：npm install tinymce -S

第二步：創建組件

//增加模版
<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進行個性化配置

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.將服務器返回的路徑包裝成<img src='返回的路徑'>

3.將自己包裝的img標簽放入鼠標當前指針處

let dom = tinymce.activeEditor.dom;
tinyMCE.execCommand("mceInsertContent",false,dom.createHTML("img", {src: 路徑}));

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。