vue.js3.x安裝tinymce 5.8.2並應用(vue 3.0.5)

一，tinymce在npm的代碼地址:

https://www.npmjs.com/package/@tinymce/tinymce-vue

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締 郵箱: [e-mail]

 

二，tinymce的官方網站:

https://www.tiny.cloud/tinymce/

 

三，tinymce的安裝命令

liuhongdi@lhdpc:/data/vue/vue3index$ npm install tinymce @tinymce/tinymce-vue -S

 

四，查看安裝后的版本: 

liuhongdi@lhdpc:/data/vue/vue3index$ npm list tinymce
vue3login@0.1.0 /data/vue/vue3index
└── tinymce@5.8.2
 
liuhongdi@lhdpc:/data/vue/vue3index$ npm list @tinymce/tinymce-vue
vue3login@0.1.0 /data/vue/vue3index
└── @tinymce/tinymce-vue@4.0.4

 

五，使用前的准備工作:

1,在需要使用編輯器的目錄下新建一個static目錄:

    復制node_modules/tinymce/skins   復制到 static目錄下

      

2,從官網下載語言包，也保存到static目錄下:

   地址:

https://www.tiny.cloud/get-tiny/language-packages/

選擇chinese下載

解壓縮后，

復制langs目錄到static目錄下:

效果如圖:

六，寫一個應用tinymce的demo

 

<template>
  <div class="view_root">

  <!-- 新增公告彈窗 -->

    <el-form :model="addForm" ref="addNoticeForm" label-width="80px" label-position="right">
      <el-form-item label="用戶" >
        <div>
          <el-checkbox-group v-model="checkboxGroup1" size="small">
            <el-checkbox v-for="staffone in staffs" :label="staffone.userid" :key="staffone.userid">{{staffone.nickname}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="標題" prop="title">
        <el-input v-model="addForm.title" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="內容" prop="content">
      <!--
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="addForm.content" autocomplete="off" ></el-input>
      -->

        <editor v-model="addForm.content" :init="init"/>

      </el-form-item>
    </el-form>
    <div style="text-align: right;">
      <el-button @click="closeAddDialog">取 消</el-button>
      <el-button @click="saveAddNotice" type="primary">確 定</el-button>
    </div>
  </div>
</template>
<script>
import {apiNoticeAdd,apiNoticeEdit} from "@/network/api";
import {reactive, ref,onMounted} from "vue";
import {ElMessage} from "element-plus";

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'; // 引用主題文件
import 'tinymce/icons/default'; // 引用圖標文件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";

import "tinymce/plugins/print";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/codesample";
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/media";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/hr";
import "tinymce/plugins/searchreplace";

export default {

  components: {
    'editor': Editor
  },
  setup() {
    //--------------------------------------tinymce begin

    const content = ref('');
    const init = {
      language_url: require("./static/langs/zh_CN.js"), // 中文語言包路徑
      language: "zh_CN",
      skin_url: require("./static/skins/ui/oxide/skin.css"), // 編輯器皮膚樣式
      height: 320,
      toolbar_mode: "none",
      plugins: 'image searchreplace link code table lists print preview fullscreen restoredraft codesample anchor pagebreak media insertdatetime emoticons hr', // 插件需要import進來
      toolbar1: 'undo redo cut copy paste searchreplace | styleselect fontselect fontsizeselect | lineheight forecolor backcolor bold italic underline strikethrough ',
      toolbar2:  'alignleft aligncenter alignright alignjustify outdent indent | removeformat subscript superscript | link image media insertdatetime emoticons anchor pagebreak hr blockquote  table numlist bullist codesample | code print preview fullscreen',
      content_style: "p {margin: 5px 0; font-size: 14px}",
      fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
      font_formats: "微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
      branding: false,
      elementpath: false,
      resize: false, // 禁止改變大小
      statusbar: false, // 隱藏底部狀態欄
      menubar: 'file edit insert view format table',
      menu: {
        file: {title: 'File', items: 'newdocument restoredraft | preview | print'},
      },

    };

    //--------------------------------------tinymce end

    onMounted(() => {
      tinymce.init(); // 初始化
    })

    return {
      //-----------------------------tinymce begin
      content,
      init,
      //-----------------------------tinymce end
    }
  },
}
//display: none;
</script>
<style>
.el-form-item {
  margin-bottom: 2px;
}
.hiddenInput {
  height: 160px;
  width:160px;
  background: #ff0000;
  opacity: 0.5;
  display: none;
}
.system_state {
  padding: 10px;
}

.demo-input-label {
  display: inline-block;
  width: 130px;
}
</style>

 

七，效果展示

八，查看當前項目中vue.js的版本 

liuhongdi@lhdpc:/data/vue/vue3index$ npm list vue
vue3login@0.1.0 /data/vue/vue3index
├─┬ @tinymce/tinymce-vue@4.0.4
│ └── vue@3.0.5 deduped
├─┬ @vue/cli-plugin-babel@4.5.9
│ └─┬ @vue/babel-preset-app@4.5.9
│   └── vue@3.0.5 deduped
├─┬ @vue/compiler-sfc@3.0.5
│ └── vue@3.0.5 deduped
├─┬ element-plus@1.0.1-beta.20
│ └── vue@3.0.5 deduped
├─┬ vue-router@4.0.2
│ └── vue@3.0.5 deduped
├── vue@3.0.5
├─┬ vue3-count-to@1.0.10
│ └── vue@3.0.5 deduped
└─┬ vuex@4.0.0
  └── vue@3.0.5 deduped

 

可以看到vue的版本是3.0.5