tinymce富文本vue使用教程

最新推荐文章于 2024-03-29 09:50:06 发布

·某某·

最新推荐文章于 2024-03-29 09:50:06 发布

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： vue.js 前端其他

本文链接：https://blog.csdn.net/weixin_43123984/article/details/121701648

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

tinymce富文本vue使用教程

一、资源下载

npm install tinymce -S  // 当前版本^5.1.0
npm install @tinymce/tinymce-vue -S  // 当前版本^3.0.1

二、下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包
在这里插入图片描述
下载的时候可以先在static下面建个目录tinymce

下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到static/tinymce目录下面
下载完中文语言包后，将其解压到static/tinymce目录下

三、初始化富文本信息

import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/modern/theme'
import 'tinymce/themes/silver/theme'
//如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
//不过一般都会报错,说找不到的....

tingmce-vue 是一个组件,需要在components中注册,然后再使用

components: {Editor}

<editor id="tinymce" v-model="value" :init="init"></editor>

这里的 init 是 tinymce 初始化配置项，完整 api 可以参考官方文档
编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

init: {
     selector: '#tinymce',  // tinymce的id
     language_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径
     language: 'zh_CN',  // 语言
     skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
}

同时在 mounted 中也需要初始化一次：

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

本人以上配置完毕后界面如下且会报两个错误
在这里插入图片描述

解决方案：导入以下缺失路径

import 'tinymce/icons/default/icons'
export default {
   data () {
       return {
           // init中添加如下信息
           init: {
               content_css: '/static/tinymce/skins/content/default/content.css',            
           }        
       }    
   }
}

四、扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能tinymce 通过添加插件 plugins 的方式来添加功能
比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件
在import里引入插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
//下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";

在data的init对象里引入插件

plugins: 'image link code table lists wordcount',  // 引入插件

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏

五、其他注意

如果出现图的报错
在这里插入图片描述
这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
如果还存在报错,这是因为 init 参数地址错误
这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

六、tinymce一些功能配置

// 注意：在data的init中配置
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, // 禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
file_picker_types: 'image',
images_upload_credentials: true,

七、图片上传（个人整理图片上传两种方式）

// 第一种
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
images_upload_handler: (blobInfo, success, failure) => {
  const img = 'data:image/jpeg;base64,' + blobInfo.base64()
  success(img)
}

// 第二种
// 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）
images_upload_handler: (blobInfo, success, failure) => {
  let config = {
    headers: {'Content-Type': 'multipart/form-data'}
  }
  let formdata = new FormData()
  formdata.append('FFILE', blobInfo.blob())
  formdata.append('NAME', 'zcfa')
  formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')
  axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {
    if (data && data.result === 'success') {
      this.$message({
        message: '上传成功',
        type: 'success',
        duration: 1500
      })
      // 存放返回成功的图片路径
      success(data.imgUrl[0])
    } else {
      failure('上传失败！！！')
    }
  }).catch(() => {
    failure('上传错误！！！')
  })
}

八、封装

子组件tinymce(完整代码)

<template>
  <div class="tinymce-container">
<!--    <div style="color: #fff">{{value}}</div>-->
    <editor id="tinymce" v-model="value" :init="init"></editor>
  </div>
</template>

<script>
  import axios from 'axios'
  import tinymce from 'tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import 'tinymce/icons/default/icons'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/wordcount'

  export default {
    name: 'tinymce',
    props: {
      tinymceHtml: '',
      tinymceHeight: {
        type: Number,
        default: 500
      }
    },
    components: {
      Editor
    },
    data () {
      return {
        value: this.tinymceHtml,  // 父組件通过ref拿到该组件的值
        init: {
          selector: '#tinymce',  // tinymce的id
          language_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径
          language: 'zh_CN',  // 语言
          skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
          content_css: '/static/tinymce/skins/content/default/content.css',
          height: 600,    // 编辑器高度
          plugins: 'image link code table lists wordcount',  // 引入插件
          toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏
          browser_spellcheck: true, // 拼写检查
          branding: false, // 去水印
          elementpath: false, // 禁用编辑器底部的状态栏
          statusbar: false, // 隐藏编辑器底部的状态栏
          paste_data_images: true, // 允许粘贴图像
          menubar: false, // 隐藏最上方menu
          fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
          file_picker_types: 'image',
          images_upload_credentials: true,
          // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
          // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
          // images_upload_handler: (blobInfo, success, failure) => {
          //   const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          //   success(img)
          // }

          // 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）
          images_upload_handler: (blobInfo, success, failure) => {
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            let formdata = new FormData()
            formdata.append('FFILE', blobInfo.blob())
            formdata.append('NAME', 'zcfa')
            formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')
            axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {
              if (data && data.result === 'success') {
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    // this.fileList = []
                    // this.$emit('refreshDataList')
                    // this.visible = false
                  }
                })
                // 存放返回成功的图片路径
                success(data.imgUrl[0])
              } else {
                failure('上传失败！！！')
              }
            }).catch(() => {
              failure('上传错误！！！')
            })
          }
        }
      }
    },
    watch: {
      tinymceHtml (newV, oldV) {
        this.value = newV
      }
    },
    mounted () {
      tinymce.init({})
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
</style>

父组件中使用该组件

<template>
  <div>
    <tinymce ref="tinymce" :tinymceHtml="content"></tinymce>
  </div>
</template>

<script>
  import tinymce from '@/components/tinymce/tinymce'
  export default {
    data () {
      return {
        content: ''
      }
    },
    components: {
      tinymce
    }
  }
</script>

<style lang="scss" scoped>
</style>

·某某·

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
tinymce富文本vue使用教程

tinymce富文本vue使用教程一、资源下载二、下载中文语言包三、初始化富文本信息四、扩展插件五、其他注意六、tinymce一些功能配置七、图片上传（个人整理图片上传两种方式）八、封装一、资源下载npm install tinymce -S // 当前版本^5.1.0npm install @tinymce/tinymce-vue -S // 当前版本^3.0.1二、下载中文语言包tinymce提供了很多的语言包，这里我们下载中文语言包下载的时候可以先在static下面建个目录tiny
复制链接

扫一扫