vue安裝tinyMCE

目錄

[參考視頻]
[參考文章]

官網:

https://www.tiny.cloud/auth/signup/

資源下載

tinymce 官方為 vue 項目提供了一個組件tinymce-vue

npm install @tinymce/tinymce-vue -S

在 vscode、webstorm 的終端運行這段代碼可能會報錯，最好使用操作系統自帶的命令行工具

如果有購買 tinymce 的服務，可以參考 tinymce-vue 的說明，通過 api-key 直接使用 tinymce

像我這樣沒購買的，還是要老老實實下載 tinymce

npm install tinymce -S

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

// 如果是使用 vue-cli 3.x 項目，就放到 public 目錄下，

tinymce 默認是英文界面，所以還需要下載一個中文語言包

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

然后將這個語言包放到 public 目錄下，為了結構清晰，我包了一層 tinymce 目錄

上代碼

<template>
  <div class="app-container">
    <!-- 添加或修改對話框   -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-tabs type="border-card">
        <el-tab-pane label="基本配置">

          
          <el-form-item label="標題" prop="title">
            <el-input v-model="form.title" placeholder="標題"/>
          </el-form-item>
          <el-form-item label="標簽" prop="keywords">
            <el-input v-model="form.keywords" placeholder="標簽"/>
          </el-form-item>      
          <el-form-item label="文章作者" prop="author">
            <el-input v-model="form.author" placeholder="文章作者"/>
          </el-form-item>
          
        </el-tab-pane>
        <el-tab-pane label="文章內容">
          <el-form-item label="" label-width="0" prop="content">
            <editor  v-model="form.content" :init="init"></editor>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <hr />
      <div v-html="form.content"></div>

    </el-form>
    <div>
      <el-button type="primary" @click="submitForm">確 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {getArticle, addArticle, updateArticle} from '@/api/article'
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  
  import "tinymce/themes/silver"
  import 'tinymce/icons/default/icons.min.js'

  // 編輯器插件plugins 里用到的插件,都要import引入一下,不然控制台會報錯
  // 更多插件參考：https://www.tiny.cloud/docs/plugins/

  import 'tinymce/plugins/advlist'
  import 'tinymce/plugins/autolink'
  import 'tinymce/plugins/charmap'
  import 'tinymce/plugins/print'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/anchor'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/searchreplace'
  import 'tinymce/plugins/visualblocks'
  import 'tinymce/plugins/insertdatetime'
  import 'tinymce/plugins/help'
  import 'tinymce/plugins/autoresize'

  import 'tinymce/plugins/image'// 插入上傳圖片插件
  import 'tinymce/plugins/imagetools'// 圖片編輯
  import 'tinymce/plugins/media'// 插入視頻插件
  import 'tinymce/plugins/table'// 插入表格插件
  import 'tinymce/plugins/lists'// 列表插件
  import 'tinymce/plugins/wordcount'// 字數統計插件
  import "tinymce/themes/silver/theme"
  import "tinymce/plugins/paste"
  import "tinymce/plugins/link"
  import "tinymce/plugins/code"
  import 'tinymce/plugins/fullscreen';

  import {uploadAvatar} from "@/api/system/sysuser"; //上組組件
  

  export default {
    components: {
      Editor
    },
    name: 'ArticleCreate',
    data() {
      return {

        init: {
          // 引入漢化組件
          language_url: '/tinymce/zh_CN.js',  //public目錄下
          // 設定語言為中文
          language: 'zh_CN',
          // 官網抄的圖片上傳 項目如果用了vue-resource可以用$http 因為比較懶就沒改
          images_upload_handler(blobInfo, success, failure) {

            // 圖片base64
            // let imageUrl = "data:image/jpg;base64,"+ blobInfo.base64();
            // console.log("blobInfo", blobInfo);

            // let imageUrl = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596234646&di=c6754daed08666a5b975f8960120e77b&src=http://pic1.win4000.com/pic/2/7c/bed1803982.jpg';
            // success(imageUrl) //成功后插入圖片

            let formData = new FormData
            let imageUrl = ""
            formData.append("upload[]",blobInfo.blob(),blobInfo.filename());
            //Axios上傳圖片
            uploadAvatar(formData).then(response => {
              if (response.code === 200) {
                imageUrl = process.env.VUE_APP_BASE_API + '/' + response.data
                success(imageUrl) //成功后插入圖片
                // this.msgSuccess('修改成功')
              } else {
                this.msgError(response.msg)
              }
            })
          },
          // 加入主題
          skin_url: '/tinymce/skins/ui/oxide', //public目錄下 //主題樣式
          height: 500, //高度
          // toolbar: false,//false禁用工具欄（隱藏工具欄）
          // menubar: false,// 隱藏最上方menu菜單
          browser_spellcheck: true, // 拼寫檢查
          branding: false, // 去水印
          // statusbar: false, // 隱藏編輯器底部的狀態欄
          // elementpath: false,  //禁用下角的當前標簽路徑
          paste_data_images: true, // 允許粘貼圖像

          plugins: [
            'advlist autolink  lists link imagetools image charmap print preview anchor colorpicker textcolor contextmenu',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount autoresize'
          ],
          toolbar:
            'undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent |imagetools image media | removeformat | help'
        },

        // 遮罩層
        loading: true,

        isEdit: false,
        // 類型數據字典
        typeOptions: [],
        isRecommendOptions: [], isTopOptions: [], statusOptions: [],

        // 表單參數
        form: {},
        // 表單校驗
        rules: {
          articleId:
            [
              {required: true, message: '不能為空', trigger: 'blur'}
            ],
          navigateId:
            [
              {required: true, message: '欄目ID不能為空', trigger: 'blur'}
            ],
          title:
            [
              {required: true, message: '標題不能為空', trigger: 'blur'}
            ],
          author:
            [
              {required: true, message: '文章作者不能為空', trigger: 'blur'}
            ],
          content:
            [
              {required: true, message: '內容不能為空', trigger: 'blur'}
            ],
        }
      }
    },
    created() {
      this.getDicts('sys_yes_no').then(response => {
        this.isRecommendOptions = response.data
      })
      this.getDicts('sys_yes_no').then(response => {
        this.isTopOptions = response.data
      })
      this.getDicts('sys_normal_disable').then(response => {
        this.statusOptions = response.data
      })
    },
    watch: {},
    methods: {

      // 取消按鈕
      cancel() {
        this.reset()
      },
      // 表單重置
      reset() {
        this.form = {
          articleId: undefined,
          navigateId: undefined,
          title: undefined,
          keywords: undefined,
          description: undefined,
          imageUrl: undefined,
          content: undefined,
          author: undefined,
          source: undefined,
          hits: undefined,
          isRecommend: undefined,
          isTop: undefined,
          url: undefined,
          tags: undefined,
          commentNums: undefined,
          status: undefined,
          timeFormt: undefined,
        }
        this.resetForm('form')
      },
      /** 重置按鈕操作 */
      resetQuery() {
        this.resetForm('queryForm')
      },


      /** 修改按鈕操作 */
      handleUpdate(row) {
        this.reset()
        const articleId = row.articleId || this.ids
        getArticle(articleId).then(response => {
          this.form = response.data
          this.open = true
          this.title = '修改文章表'
          this.isEdit = true
        })
      },
      // 上傳圖片
      // uploadImg() {
        // this.$refs.cropper.getCropBlob(data => {
        //   const formData = new FormData()
        //   formData.append('upload[]', data)
        //   uploadAvatar(formData).then(response => {
        //     if (response.code === 200) {
        //       this.open = false
        //       this.options.img = process.env.VUE_APP_BASE_API + '/' + response.data
        //       this.msgSuccess('修改成功')
        //     } else {
        //       this.msgError(response.msg)
        //     }
        //     this.$refs.cropper.clearCrop()
        //   })
        // })
      // },


      /** 提交按鈕 */
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.articleId !== undefined) {
              updateArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            } else {
              addArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })
      },

    }
  }
</script>

效果

已經上傳到后台的static目錄里了

到此已經完成了