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

如何在vue3中使用tinymce富文本编辑器?使用tinymce上传图片到服务器。
来源: http://www.fuzhongkuo.com/article/detail?id=14 作者:E盘 浏览:1725 发布时间: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()
            }
          })
      },
}

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

 

 

参考用例

Example

 

参考文档

Tinymce 官网:https://www.tiny.cloud/tinymce/

Tinymce Github: https://github.com/tinymce/

Tinymce Npm: https://www.npmjs.com/package/tinymce

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

Tinmce-vue Npm: https://www.npmjs.com/package/@tinymce/tinymce-vue

评论记录
  • 周松松博客: 太专业了,看不懂!
  • 南怀瑾: 人生的最高境界是佛为心,道为骨,儒为表,大度看世界。技在手,能在身,思在脑,从容过生活。
  • 季羡林: 假话全不说,真话不全说。
  • 丰子恺: 不乱于心,不困于情。不畏将来,不念过往。如此,安好。
  • 李叔同: 物忌全胜,事忌全美,人忌全盛。
  • 张爱玲: 你如果认识从前的我,也许你会原谅现在的我
  • 钱钟书: 大话哄人惯了,连自己也哄相信--这是极普通的心理现象。
  • 老舍: 雨下给富人,也下给穷人,下给义人,也下给不义的人;其实,雨并不公道,因为下落在这个没有公道的世界上。
  • 鲁迅: 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的;倘没有看出可走的路,最要紧的是不要去惊醒他。
  • 1
留言咨询