vue富文本編輯器tinymce

一、概述

TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器。同類程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的優勢：

• 開源可商用，基於LGPL2.1
• 插件豐富，自帶插件基本涵蓋日常所需功能（示例看下面的Demo-2）
• 接口豐富，可擴展性強，有能力可以無限拓展功能
• 界面好看，符合現代審美
• 提供經典、內聯、沉浸無干擾三種模式（詳見“介紹與入門”）
• 對標准支持優秀（自v5開始）
• 多語言支持，官網可下載幾十種語言。

 

二、vue-element-admin

vue-element-admin 是一個后台前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內置了 i18n 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后台產品原型。

官方鏈接：https://panjiachen.github.io/vue-element-admin-site/zh/

 

我嘗試直接使用tinymce模塊使用會有各種問題，打開頁面無法加載出富文本編輯器或者出現其他問題。

注意：vue-element-admin已經集成好了tinymce，接來下我會如何介紹將tinymce移植到一個新的vue項目中。

 

三、移植tinymce

下載vue-element-admin

首先下載vue-element-admin，默認master分支是英文的，我需要中文版的。

國內：
git clone -b i18n https://gitee.com/panjiachen/vue-element-admin.git

國外：
git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git

注意：i18n 分支表示國際版本，里面包含中文。后面我會介紹如何切換到中文。

 

創建新項目

創建項目tinymce_demo，並安裝element-ui模塊，參考鏈接：https://www.cnblogs.com/xiao987334176/p/14187889.html

 

安裝模塊

安裝tinymce

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

 

安裝sass

npm install node-sass@4.14.1 sass-loader@7.3.1 style-loader --save-dev

 

復制文件

vue-element-admin下載完成后，進入目錄src\components，將Tinymce目錄復制到tinymce_demo項目中的src\components目錄下。

在src\components目錄下創建測試文件test.vue，此時：tinymce_demo項目src目錄結構如下：

./
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── HelloWorld.vue
│   ├── test.vue
│   └── Tinymce
│       ├── components
│       │   └── EditorImage.vue
│       ├── dynamicLoadScript.js
│       ├── index.vue
│       ├── plugins.js
│       └── toolbar.js
├── main.js
└── router
    └── index.js

 

指定中文

修改文件src/components/Tinymce/index.vue

修改計算方法language，指定語言為中文。

language() {
  // return this.languageTypeList[this.$store.getters.language]
  return this.languageTypeList['zh']
},

注意：由於我這里沒有使用store，所以直接固定語言為中文。

 

修改src/components/test.vue，引用組件Tinymce

<template>
  <div class="components-container">
    <aside>
      富文本是管理后端的一個核心特性，但同時它也是一個有很多坑的地方。在選富文本的過程中，我也走了很多彎路。市面上常見的富文本基本都用上了，我最終選擇了Tinymce。請參閱更詳細的富文本比較和介紹。
      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">文檔</a>
    </aside>
    <div>
      <tinymce v-model="content" :height="300" />
    </div>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
    export default {
      name: "test",
      components: { Tinymce },
      data() {
        return {
          content:'請輸入內容'
        }
      }
    }
</script>

<style scoped>
  .editor-content{
    margin-top: 20px;
  }
</style>

 

修改src/App.vue，注釋掉默認內容

<template>
  <div id="app">
<!--    <img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/*#app {*/
/*  font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
</style>

 

修改src/router/index.js，指定路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'test',
      component: test
    },
  ]
})

 

啟動vue項目，訪問首頁，效果如下：