tinymce

1.引入和原始使用

下載 地址 : https://www.tiny.cloud/get-tiny/self-hosted/

語言包 地址: https://www.tiny.cloud/get-tiny/language-packages/

# vue2.0版本應該使用npm install --save "@tinymce/tinymce-vue@^3"# vue3.0版本應該使用npm install --save "@tinymce/tinymce-vue@^4"# 再運行 npm install tinymce -S

安裝之后,在 node_modules 中找到 tinymce/skins 目錄,然后將 skins 目錄拷貝到 static 目錄下

結構 如: static

tinymce

skins

zh_CN.js

在頁面中引入以下文件

import tinymce from "tinymce/tinymce";import "tinymce/themes/silver/theme";import Editor from "@tinymce/tinymce-vue";import "tinymce/icons/default/icons";import "tinymce/plugins/media"; // 插入視頻插件import "tinymce/plugins/image";import "tinymce/plugins/link";import "tinymce/plugins/code";import "tinymce/plugins/table";import "tinymce/plugins/lists";import "tinymce/plugins/contextmenu";import "tinymce/plugins/wordcount";import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";

tinymce-vue 是一個組件,需要在 components 中注冊,

 components: { Editor },

然后直接使用

<Editor  v-model="tinymceHtml" :init="editorInit"></Editor>

編輯器需要一個 skin 才能正常工作,所以要設置一個 skin_url 指向之前復制出來的 skin 文件

editorInit: {    language_url: '/static/tinymce/zh_CN.js',    language: 'zh_CN',    skin_url: '/static/tinymce/skins/ui/oxide', // skin路徑    height: 300, // 編輯器高度    branding: false, // 是否禁用“Powered by TinyMCE”    menubar: true, // 頂部菜單欄顯示    plugins: this.plugins,    toolbar: this.toolbar,}

同時在 mounted 中也需要初始化一次:

mounted (){tinymce.init({});},

如果在這里傳入上面的 init 對象,并不能生效,但什么參數都不傳也會報錯,所以這里傳入一個空對象

https://blog.csdn.net/zjiang1994/article/details/79880806

https://blog.csdn.net/zjiang1994/article/details/79856058

完成了上面的初始化之后,就已經能正常運行編輯器了,但只有一些基本功能

tinymce 通過添加插件 plugins 的方式來添加功能

比如要添加一個上傳圖片的功能,就需要用到 image 插件,添加超鏈接需要用到 link 插件

<template>  <p class='tinymce'>    <h1>tinymce</h1>    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>    <p v-html='tinymceHtml'></p>  </p></template><script>import tinymce from "tinymce/tinymce";import "tinymce/themes/silver/theme";import Editor from "@tinymce/tinymce-vue";import "tinymce/icons/default/icons";import "tinymce/plugins/media"; // 插入視頻插件import "tinymce/plugins/image";import "tinymce/plugins/link";import "tinymce/plugins/code";import "tinymce/plugins/table";import "tinymce/plugins/lists";import "tinymce/plugins/contextmenu";import "tinymce/plugins/wordcount";import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";  export default {  name: 'tinymce',  data () {    return {      tinymceHtml: '請輸入內容',      init: {          language_url: '/static/tinymce/zh_CN.js',          language: 'zh_CN',          skin_url: '/static/tinymce/skins/ui/oxide', // skin路徑          content_css:'/static/tinymce/skins/content/default/content.css',          height: 300, // 編輯器高度          branding: false, // 是否禁用“Powered by TinyMCE”          menubar: true, // 頂部菜單欄顯示          font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif',          fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px',          plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',          toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',      }    }  },  mounted () {    tinymce.init({})  },  components: {Editor}}</script>

但是當富文本在某一個彈窗上使用時, 工具欄會出現下拉選擇時的層級比彈窗的小,所以,選項會被彈窗遮擋。 而解決這個問題,需要把工具欄的下拉框的層級提高, 找到static/tinymce/skins/ui/oxide/skin.min.css文件 把class名為tox-tinymce-aux的第一個的z-index屬性變大即可

tinymce 提供了 images_upload_url 等 api 讓用戶配置上傳圖片的相關參數

但為了在不麻煩后端的前提下適配自家的項目,還是得用 images_upload_handler 來自定義一個上傳方法

     images_upload_handler: (blobInfo, success, failure) => {       // const img = 'data:image/jpeg;base64,' + blobInfo.base64();      // success(img);       this.handleImgUpload(blobInfo, success, failure);     }

這個方法會提供三個參數:blobInfo, success, failure

其中 blobinfo 是一個對象,包含上傳文件的信息

success 和 failure 是函數,上傳成功的時候向 success 傳入一個圖片地址,失敗的時候向 failure 傳入報錯信息

handleImgUpload (blobInfo, success, failure) {      // 上傳的文件信息        let fd = new FormData();        fd.append("file", blobInfo.blob());        fd.append("type","tinymec")        this.$http({          url: this.$http.adornUrl(            "/localUpload/uploadForType"           ),          method: "post",          data: fd,          headers: {            "Content-Type":              "multipart/form-data;boundary=" + new Date().getTime(),            "token": this.$cookie.get('token')          },        }).then(({ data }) => {          if (data && data.code === 0) {            this.$message({              message: data.path + ",操作成功",              type: "success",              duration: 1500,              onClose: () => {                 success(data.path)              },            });          } else {            failure('error')          }        });}

2.模塊封裝

<template>  <Editor  v-model="editHtml" :init="editorInit" @change="changeEdit" ></Editor></template><script>import tinymce from "tinymce/tinymce";import "tinymce/themes/silver/theme";import Editor from "@tinymce/tinymce-vue";import "tinymce/icons/default/icons";import "tinymce/plugins/media"; // 插入視頻插件import "tinymce/plugins/image";import "tinymce/plugins/link";import "tinymce/plugins/code";import "tinymce/plugins/table";import "tinymce/plugins/lists";import "tinymce/plugins/contextmenu";import "tinymce/plugins/wordcount";import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";export default {  props: {    value: {      //父組件傳進來的默認值      default: "",    },  },  components: { Editor },  Myeditmounted() {    tinymce.init({});  },  created() {},  data() {    return {      editHtml: "",      editorInit: {        language_url: "/static/tinymce/zh_CN.js",        language: "zh_CN",        skin_url: "/static/tinymce/skins/ui/oxide", // skin路徑        content_css: "/static/tinymce/skins/content/default/content.css",        height: 300, // 編輯器高度        branding: false, // 是否禁用“Powered by TinyMCE”        menubar: true, // 頂部菜單欄顯示        font_formats:          "微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif",        fontsize_formats:          "12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px",        plugins:          "link lists image code table colorpicker textcolor wordcount contextmenu",        toolbar:          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",        images_upload_handler: (blobInfo, success, failure) => {          // const img = "data:image/jpeg;base64," + blobInfo.base64();          // success(img);           this.handleImgUpload(blobInfo, success, failure);                  },      },    };  },  watch: {    value: {      //data改變的時候同步到子組件      deep: true,      handler(value) {        this.editHtml = value;        // console.log(value);      },          },    editHtml: {      //data改變的時候同步到子組件      deep: true,      handler(val) {        this.$emit('update:value', val);        console.log(val);        // console.log(this.value);      },          },  },  methods: {    handleImgUpload (blobInfo, success, failure) {      // 上傳的文件信息        let fd = new FormData();        fd.append("file", blobInfo.blob());        fd.append("type","tinymec")        this.$http({          url: this.$http.adornUrl(            "/file/uploadForType"           ),          method: "post",          data: fd,          headers: {            "Content-Type":              "multipart/form-data;boundary=" + new Date().getTime(),            "token": this.$cookie.get('token')          },        }).then(({ data }) => {          if (data && data.code === 0) {            this.$message({              message: data.path + ",操作成功",              type: "success",              duration: 1500,              onClose: () => {                 success(data.path)              },            });          } else {            failure('error')          }        });},    changeEdit(){        console.log(1111);    },  },};</script><style></style><custom1>  This could be e.g. documentation for the component.</custom1>

155091.html