Vue CLI 3+tinymce 5富文本编辑器整合

image

基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/details/83310879
做了些小修改,详情见github

Github:https://github.com/liub1934/vue-use-tinymce

插件安装

tinymce官方提供了一个vue的组件tinymce-vue
如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,像我这种懒的注册或者购买的直接下载tinymce,自力更生

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

安装tinymce

npm install tinymce -S

若无法完成安装,将下面的配置到package.json中执行npm install

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.3"

下载中文语言包

tinymce提供了很多的语言包,这里我们下载中文语言包

image

使用

1、在public目录下新建tinymce,将上面下载的语言包解压到该目录
2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面
最终形成以下目录形式:

image

初始化

引入基本文件

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

components中注册tinymce-vue才能使用

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

初始化配置项,具体参考官网文档,这里说几个重要的

init: {
  language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
  language: 'zh_CN',//语言
  skin_url: '/tinymce/skins/ui/oxide',// skin路径
  height: 300,//编辑器高度
  branding: false,//是否禁用“Powered by TinyMCE”
  menubar: false,//顶部菜单栏显示
}

扩展插件

默认的编辑器只有基本功能,如果还需要上传图片,插入表格之类的功能就需要添加插件
如添加上传图片和插入表格的插件

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

引入后还需要再plugins上配置和toolbar工具栏上添加相应的按钮

plugins: 'lists image media table wordcount',
toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'

这里我们一般会再次把它进行封装一下,以便其他地方随时可以引用

完整代码tinymce-editor.vue

这里只是一个简单的封装,不一定满足所有人的需求,可以按照自己的需求和思路进行更深层次的封装。

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    // 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
    // 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media table wordcount'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
    }
  },
  data () {
    return {
      init: {
        language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
        content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
        // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
        // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
        height: 300,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件,如清空内容
    clear () {
      this.myValue = ''
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

封装后使用

<template>
  <div>
    { { msg }}
    <tinymce-editor ref="editor"
      v-model="msg"
      :disabled="disabled"
      @onClick="onClick">
    </tinymce-editor>
    <button @click="clear">清空内容</button>
    <button @click="disabled = true">禁用</button>
  </div>
</template>


<script>
import TinymceEditor from './tinymce-editor/tinymce-editor'
export default {
  components: {
    TinymceEditor
  },
  data () {
    return {
      msg: 'Welcome to Use Tinymce Editor',
      disabled: false
    }
  },
  methods: {
    // 鼠标单击的事件
    onClick (e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    // 清空内容
    clear () {
      this.$refs.editor.clear()
    }
  }
}
</script>

效果图

image

在线预览

在线Demo

需要梯子
需要梯子
需要梯子

Edit on CodeSandBox

评论

  1. qiang
    Windows Chrome
    3年前
    2019-8-01 15:02:09

    他们的问题太简单了,我问个难点的:
    我自定义了一个上下文菜单,选中一张图片,右击时出现一个上下文按钮,点击按钮,出现一个dialog,此时我希望把关于这张图片的信息显示在dialog中,包括这种图片/他的宽高/他的src等,这要怎么操作?文档里有一些阅读障碍,实在时找不着方法。

  2. 露露
    Windows Chrome
    3年前
    2019-9-23 14:04:48

    博主你好,步骤出来是空白,
    但是报这个错误?Uncaught SyntaxError: Unexpected token <

    • LiuBing
      博主
      露露
      Windows Chrome
      3年前
      2019-9-23 15:30:46

      示例代码都是测试过没问题的,不排除你新加的插件或者其他问题造成的。

      • 露露
        LiuBing
        Windows Chrome
        3年前
        2019-9-23 15:47:03

        好的,还有个问题想请教一下您,我看你图片可以自动拉伸大小,为什么我的不可以呢,是哪一步错了吗!
        ![0K~Y]ZP{`}U}~4E27X}FAV0.png](https://i.loli.net/2019/09/23/xHdr1eCmbRY7oFE.png)

        • LiuBing
          博主
          露露
          Windows Chrome
          3年前
          2019-9-23 19:46:02

          不知道你当前用的什么版本,如果你没做其他什么配置的话,这个图片拉伸是自带的。

        • LiuBing
          博主
          露露
          Windows Chrome
          3年前
          2019-9-23 19:47:06

          需要点击图片才会出现拉伸的四个角

          • jw
            LiuBing
            Linux Chrome
            3年前
            2019-9-25 19:10:07

            这个可以无网络使用么,我看到他总是加载cdn,而且他报这个错
            tinymce.js:2692 GET https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.2/skins/content/default/content.min.css net::ERR_ABORTED 404
            不知道怎么解决

            • LiuBing
              博主
              jw
              Windows Chrome
              3年前
              2019-9-26 12:50:32

              可以无网络使用,加载的都是本地的资源,自己clone下来运行下就知道了:https://github.com/liub1934/vue-use-tinymce

              • jw
                LiuBing
                Linux Chrome
                3年前
                2019-9-26 14:23:01

                我看了下,缺少了content_css
                我看你的项目打开后都没加载cdn 加载tinymce.min.js,
                我的项目上直接改用你的,版本号都相同,但是一打开页面都会加载这个https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.2/tinymce.min.js

              • jw
                LiuBing
                Linux Chrome
                3年前
                2019-9-26 14:43:41

                好了,解决了。谢谢

  3. Windows Chrome
    3年前
    2019-10-30 13:51:44



    查看图片
    image.png

    ,为啥我的没有拖动上传图片

  4. JackieZhang
    Windows Chrome
    3年前
    2019-11-04 9:56:27

    打包之后 init 中的依赖加载失败是什么原因?

  5. hui啊hui
    Macintosh Chrome
    3年前
    2020-2-15 2:02:59

    Utils.js?258f:106 Uncaught (in promise) TypeError: Cannot read property 'input' of undefined
    at initEditor (eval at <anonymous> (app.js:5707), <anonymous>:112:24)
    at Editor.eval (eval at <anonymous> (app.js:5728), <anonymous>:43:134)
    at EventDispatcher.fire (eval at <anonymous> (app.js:5863), <anonymous>:26156:31)
    at Editor.fire (eval at <anonymous> (app.js:5863), <anonymous>:26262:55)
    at fireInit (eval at <anonymous> (app.js:5863), <anonymous>:12348:21)
    at initEditor (eval at <anonymous> (app.js:5863), <anonymous>:24558:7)
    at eval (eval at <anonymous> (app.js:5863), <anonymous>:24678:9)
    at eval (eval at <anonymous> (app.js:5863), <anonymous>:2905:13)

    这个是什么原因呢?

  6. 张勇
    Windows Chrome
    3年前
    2020-6-02 18:41:59

    我使用这个源码,直接npm install ,然后预览,图标都是undefined,我百度了下,说是无法正常加载tinymce包里面的icons.js文件,直接变成了html页面,导致语法错误:Uncaught SyntaxError: Unexpected token '<',没有找到解决办法,应该怎么解决,如果有办法联系下微信a758922096,很急,谢谢

    • 宝2333
      张勇
      Macintosh Chrome
      2年前
      2020-6-24 14:28:44

      请问解决了吗

    • 张勇
      张勇
      Windows Chrome
      2年前
      2020-7-09 17:12:01

      解决了,加入了import 'tinymce/icons/default'就好了

      • 小白
        张勇
        Windows Chrome
        2年前
        2021-3-01 14:30:19

        恩人啊

  7. genese
    Macintosh Chrome
    2年前
    2020-6-17 15:14:29

    你好,我才用了你的步骤,但是我的编辑器icon乱码

  8. 剑倾
    Windows Chrome
    2年前
    2020-7-10 16:46:00

    建议在 this.init 中加上 content_style(默认样式),可以保证前后台显示效果一致

  9. lx
    Windows Chrome
    2年前
    2020-7-16 10:33:23

    厉害

  10. runyu
    Windows Chrome
    9月前
    2022-3-07 17:38:02

    牛逼啊,还是你这个管用,试了好多其他的都不行

发送评论编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇