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

1、tinymce 官方为 vue 项目提供了一个组件 tinymce-vue

2、npm安装vue组件,同事安装源插件

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

3、安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下,如果是使用 vue-cli 3.x 构建的项目,就放到 public 目录下

4、tinymce 默认是英文界面,所以如果需要汉化还需要下载一个中文语言包,然后将它放到 static 目录下

5、在页面中引入以下文件:

import tinymce from 'tinymce/tinymce'

import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver/theme'

6、tinymce-vue 是一个组件,需要在 components 中注册后直接使用

<editor id="tinymce" v-model="form.content" :init="init"></editor>

7、在data中声明init变量,语言包、skin的路径就引用之前的存放路径,注意skin必须引用,否则不显示。

init: {

        language_url: '/static/tinymce/langs/zh_CN.js',

        language: 'zh_CN',

        skin_url: '/s

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值