在 Vue 项目中引入 tinymce 富文本编辑器

2023-02-21 638

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： tinymce中文版资料：上传图片和文件 | TinyMCE中文文档中文手册tinymce英文版资料：tinymce | Docs | TinyMCEtinymce Github地址：https://github.com/tinymce/tinymce-vuetinymce gitee开源项目demo:tinymce: 在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图

1、tinymce相关参考资料

tinymce中文版资料：

上传图片和文件 | TinyMCE中文文档中文手册

tinymce英文版资料：

tinymce | Docs | TinyMCE

tinymce Github地址：

https://github.com/tinymce/tinymce-vue

tinymce gitee开源项目demo:

tinymce: 在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片

2、tinymce安装以及下载

版本：cli3+tinymce5

如果没有购买tinymce服务，需要安装下面2个。

npm install @tinymce/tinymce-vue
npm install tinymce

安装完成以后，在安装目录node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public（cli3是public目录，cli2应该是static目录）目录下。

tinymce默认是英文界面，需要下载一个中文包，选择对应的中文包进行下载。把这个中文包也放在public目录下面。

下载地址：Language Packages | Trusted Rich Text Editor | TinyMCE

3、初始化

在页面引入以下文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

发现编辑器图片找不到，引入图标

import 'tinymce/icons/default/icons'

tinymce/tinymce是一个组件，引入组件注册，直接使用

//注册组件
components: {
    Editor
}

使用：

v-model：文本编辑器val，

:init绑定的初始化配置参数，完整的api可以参考上面提到的官方英文文档，和中文版的文档说明

:key，每次打开编辑器都是新的，防止重复。

<!-- 富文本编辑器 -->
<Editor id="tinymce" v-model="detailFormAdd.articleContent" :init="editorInit" :key="tinymceFlag"></Editor>

基础配置讲解：

4、扩展组件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件步骤

plugins 的方式来添加功能

import引入组件

toolbar添加功能按钮

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件，常用的插件如下：

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'
import 'tinymce/plugins/save'
import 'tinymce/plugins/image'
editorInit: {
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 500,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        plugins: 'save advlist table lists paste preview fullscreen image',
        toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen'
      }

5、上传图片

图片上传有2种，菜单栏增加了上传图片的按钮功能，2是编辑器里面直接粘贴。

1、图片上传

安装4的方法，配置image菜单。在init配置方法里面增加images_upload_handler回调方法方法，自定义上传图片，可以在这里设置。这给回调有三个参数images_upload_handler: function (blobInfo, success, failure)，文件对象，成功回调，失败回调。在成功回调里面设置服务端接口返回的图片路径，图片src就会设置成返回的路径。

images_upload_handler: function (blobInfo, success, failure) {
          var formData
          var file = blobInfo.blob() // 转化为易于理解的file对象
          formData = new FormData()
          formData.append('file', file, file.name) // 添加formData
          //我项目封装的提交接口，此处写你自己的提交
          appRequestFile('xxx/xx', formData, 'post').then((res) => {
            console.log(res.data.data.filePath)
            //上传成功，成功回调，设置服务端返回的图片路径，设置成功以后，点击弹出框保存。图片就会显示在编辑器框里，图片的src就是接口返回的filePath
            success(res.data.data.filePath)
          })
        }

2、图片直接粘贴

图片直接从其他地方，复制粘贴到文本域中，首先在引入paster组件，在init配置项里，设置允许粘贴图片。

粘贴成功首先，会调用paste_preprocess方法，此时args里面会有图片相关信息，默认图片的src是base64.

然后会调用images_upload_handler，这里就跟上传图片是一样的了。

editorInit: {
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 500,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        plugins: 'save advlist table lists paste preview fullscreen image',
        toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
        images_upload_handler: function (blobInfo, success, failure) {
          var formData
          var file = blobInfo.blob() // 转化为易于理解的file对象
          formData = new FormData()
          formData.append('file', file, file.name) // 此处与源文档不一样
          appRequestFile('/upload/simple?moudle=cms', formData, 'post').then((res) => {
            console.log('-----images_upload_handler')
            console.log(res.data.data.filePath)
            success(res.data.data.filePath)
          })
        },
        paste_preprocess: function (plugin, args) {
         //粘贴图片成功，返回的args.
          console.log('---paster' + args)
        }
      }

6、最后贴下完整代码

<template>
  <div class="privateLetter mt20">
    <el-form size="small" label-width="150px" ref="detailFormAdd" :model="detailFormAdd" label-positon="left" :rules="formRule">
      <el-row>
        <el-col :span="20" :offset="1">
          <el-form-item  class="filter-item is-required" label="资讯内容：" prop="articleContent">
             <!-- 富文本编辑器 -->
             <Editor id="tinymce" v-model="detailFormAdd.articleContent" :init="editorInit" :key="tinymceFlag"></Editor>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="mt20 tc mb20">
        <el-button type="primary" size="medium" @click="submit()">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
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'
import 'tinymce/plugins/save'
import 'tinymce/plugins/image'
import 'tinymce/icons/default/icons'
import { appRequestFormData, appRequest, appRequestFile } from '@/fetch/index.js'
import qs from 'qs'
export default {
  name: '',
  components: {
    Editor
  },
  data () {
    return {
      tinymceFlag: 1,
      editorInit: {
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 500,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        plugins: 'save advlist table lists paste preview fullscreen image',
        toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
        images_upload_handler: function (blobInfo, success, failure) {
          var formData
          var file = blobInfo.blob() // 转化为易于理解的file对象
          formData = new FormData()
          formData.append('file', file, file.name) // 此处与源文档不一样
          appRequestFile('/upload/simple?moudle=cms', formData, 'post').then((res) => {
            success(res.data.data.filePath)
          })
        },
        paste_preprocess: function (plugin, args) {
          console.log('---paster')
        }
      },
      detailFormAdd: {
        articleContent: ''
      },
      formRule: {
        articleContent: [
          { required: true, message: '请编写资讯内容', trigger: 'blur' },
          { min: 1, max: 1000000, message: '请编写资讯内容', trigger: 'blur' }
        ]
      },
      setHeader: {
        token: token
      }
    }
  },
  mounted () {
    var self = this
    tinymce.init({})
  },
  activated () {
    this.tinymceFlag++
  },
  methods: {
    submit () {
      this.$refs.detailFormAdd.validate((valid) => {
        if (valid) {
          appRequestFormData('/sys/cms/save', qs.stringify(this.detailFormAdd), 'post').then((res) => {
            this.$message(res.data.msg)
            this.$router.go(-1)
          })
        } else {
          this.$message({
            type: 'error',
            message: '请完整表单信息'
          })
          return false
        }
      })
    },
    cancel () {
      this.$confirm('确定要取消吗？', '确定取消', {
        type: 'warning'
      })
        .then(() => {
          this.$router.go(-1)
        })
    }
  },
  created () {
  }
}
</script>
<style lang="stylus">
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

在 Vue 项目中引入 tinymce 富文本编辑器

1、tinymce相关参考资料

2、tinymce安装以及下载

3、初始化

4、扩展组件

5、上传图片

1、图片上传

2、图片直接粘贴

6、最后贴下完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

在 Vue 项目中引入 tinymce 富文本编辑器

1、tinymce相关参考资料

2、tinymce安装以及下载

3、初始化

4、扩展组件

5、上传图片

1、图片上传

2、图片直接粘贴

6、最后贴下完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景