vue 使用tinymce富文本编辑器

最新推荐文章于 2025-03-30 16:11:14 发布

置顶 sc_爬坑之路

最新推荐文章于 2025-03-30 16:11:14 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签：富文本编辑器富文本 vue富文本 vue

本文链接：https://blog.csdn.net/weixin_43876684/article/details/98040120

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

1.安装对应的插件

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

2.下载工具栏对应的中文语言包

在这里插入图片描述

3.在node_modules 中找到刚刚安装的tinymce这个文件夹，将skins文件夹拷贝到static或者新版的public中，并且将下载好的中文语言包放在static或者新版的public中

我这边是static

4.引用

<template>
  <div>
    <!--
    给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常，
    在activated钩子里改变key的值可以让编辑器重新创建
  -->
    <editor id="tinymceEditor"
            :init="tinymceInit"
            v-model="content"
            :key="tinymceFlag"></editor>
    <!-- <Upload
      multiple
      ref="imageUpload"
      action="//jsonplaceholder.typicode.com/posts/"
      :on-success="insertImage"
      style="display:none">
  </Upload> -->
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme' //如果没有silver文件，那就是modern文件下的theme
import Editor from '@tinymce/tinymce-vue'
//一下这些是你所需要的组件
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'

export default {
  name: 'TinymceEditor',
  components: {
    'editor': Editor
  },
  data () {
    return {
      content: "",
      tinymceFlag: 1,
      tinymceInit: {},
    }
  },
  methods: {
    // 插入图片至编辑器
    // insertImage (res, file) {
    //   let src = '' // 图片存储地址
    //   tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)
    // },
    setContent (content) {//设置内容
      this.content = content;
    },
    getContent () {//获取内容
      return this.content;
    },
  },
  created () {
    const that = this
    this.tinymceInit = {
      skin_url: '/static/tinymce/skins/ui/oxide',
      language_url: `/static/tinymce/zh_CN.js`,
      language: 'zh_CN',
      height: document.body.offsetHeight - 300,
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      // elementpath: false,  //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      menubar: false, // 隐藏最上方menu
      plugins: 'advlist table lists paste preview fullscreen',//组件的引用
      toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen',//toolbar不多解释，可根据自己需要添加，
      /**
       * 下面方法是为tinymce添加自定义插入图片按钮
       * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
       */
      // setup: (editor) => {
      //   editor.ui.registry.addButton('imageUpload', {
      //     // text: '插入图片',
      //     tooltip: '插入图片',
      //     icon: 'image',
      //     onAction: () => {
      //       let upload = that.$refs.imageUpload
      //       upload.handleClick()
      //     }
      //   })
      // }
    }
  },
  activated () {
    this.tinymceFlag++
  },
}
</script>
<style> //自己设置的一些样式，非官方
.tox-silver-sink {
  z-index: 5000 !important;
}
.tox-toolbar__group {
  border: none !important;
}
.tox-tinymce {
  height: 588px !important;
  border: none !important;
}
.tox-edit-area {
  border: none !important;
}
.tox-toolbar {
  background-color: #c5d7ec !important;
}
</style>