如何在vue3中使用tinymce富文本编辑器前端博客-前端译文-前端资讯

如何在vue3中使用tinymce富文本编辑器

如何在vue3中使用tinymce富文本编辑器？使用tinymce上传图片到服务器。

来源： http://www.fuzhongkuo.com/article/detail?id=14 作者：E盘浏览：4927 发布时间：2019-09-10 23:16:58 标签： vue3tinymcetypescript

使用背景

vue3、typescript、tinymce

使用方式

1、安装依赖包

npm i-S tinymce 
npm i-S @tinymce/tinymce-vue

或

yarn add tinymce 
yarn add @tinymce/tinymce-vue

2、下载并引用中文语言包

语言包（Language Packages）

选择Chinese (China)，并下载，在public下新建static文件夹。将资源解压到该文件内，同时将node_modules/tinymce/skins文件夹也复制过来。

3、在Vue文件中使用Tinymce

引用Tinymce资源到页面内

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"
import axios from "axios" //配合上传使用

映射组件给vue使用

js代码
 components: {
    editor: Editor,
  },

vue代码
<editor v-model="响应式内容"  :init="init" />

// Tinymce基础配置 
const init = {
      language_url: require("../../../public/static/langs/zh_CN.js"), // 中文语言包路径
      language: "zh_CN",
      skin_url: require("../../../public/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",
        },
      },
      file_browser_callback_types: "image",
      images_reuse_filename: true
    }

// 初始化Tinymce
 onMounted(() => {
      tinymce.init(init as any)
    })

4、配置完成后，Tinymce已经可以工作了

5、Tinymce支持上传图片，在init属性内添加

const init =  {
...,
images_upload_handler: (blobInfo, success, failure) => {
        let formdata = new FormData()
        const file = blobInfo.blob()
        formdata.append("file", file, file.name)
        const url = `${apiHost}upload`
        axios
          .post(url, formdata, {
            headers: { "Content-Type": "multipart/form-data" },
          })
          .then((res: any) => {
            if (res.data.code === 200) {
              success(res.data.data)
            } else {
              ElMessage.error(res.data.dataMsg)
              failure()
            }
          })
      },
}

添加后原有的普通上传功能外，又多出了本地上传功能。