快捷導(dǎo)航

vue項(xiàng)目中使用tinymce編輯器的步驟詳解

更新時(shí)間：2018年09月11日 15:47:18 作者：死亡的挽歌

本文分步驟給大家介紹了vue項(xiàng)目中使用tinymce編輯器的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Tinymce富文本也是一款很流行編輯器

把文件放在static下，然后在index.html文件中引入這個(gè)文件

 <script src="static/tinymce/tinymce.min.js"></script>
<tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce>

在其他子文件中引入這個(gè)

 import tinymce from '../components/Tinymce';
 components: {
 tinymce
 },

然后就可以調(diào)用起這個(gè)組件了。

下面看下vue項(xiàng)目中使用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";//這個(gè)到最下面那個(gè)為需要使用的工具欄模塊
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)行個(gè)性化配置

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", {//單個(gè)按鈕，此處的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('錯(cuò)誤提示')
  }
}

第二種：我自己使用的方法，簡單說一下思路

1.使用setup自定義一個(gè)按鈕，按鈕的點(diǎn)擊事件就是選擇圖片(參考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項(xiàng)目中使用tinymce編輯器的步驟詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue項(xiàng)目中使用tinymce編輯器的步驟詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具