在 Vue 项目中引入 tinymce 富文本编辑器的完整代码


Posted in Javascript onMay 04, 2018

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器

但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些:

UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲

bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery...

kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了

wangEditor:轻量、简洁、易用,但是升级到 3.x 之后,不便于定制化开发。不过作者很勤奋,广义上和我是一家人,打个call

quill:本身功能不多,不过可以自行扩展,api 也很好懂,如果能看懂英文的话...

summernote:没深入研究,UI挺漂亮,也是一款小而美的编辑器,可是我需要大的

在有这么参考的情况下,我最终还是选择了 tinymce 这个不搭梯子连官网都打不开的编辑器(简直是自讨苦吃),主要因为两点:

1. GitHub 上星星很多,功能也齐全;

2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器;

3. 不需要找后端人员扫码改接口,前后端分离;

4. 说好的两点呢!

一、资源下载

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

npm install @tinymce/tinymce-vue -S

在 vscode、webstorm 的终端运行这段代码可能会报错,最好使用操作系统自带的命令行工具

如果有购买 tinymce 的服务,可以参考 tinymce-vue 的说明,通过 api-key 直接使用 tinymce

像我这样没购买的,还是要老老实实下载 tinymce

npm install tinymce -S

安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

// 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目录下,文中所有 static 目录相关都这样处理

tinymce 默认是英文界面,所以还需要下载一个中文语言包(记得搭梯子!搭梯子!搭梯子!)

然后将这个语言包放到 static 目录下,为了结构清晰,我包了一层 tinymce 目录

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

二、初始化

在页面中引入以下文件

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

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

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

这里的 init 是 tinymce 初始化配置项,后面会讲到一些关键的 api,完整 api 可以参考官方文档

编辑器需要一个 skin 才能正常工作,所以要设置一个 skin_url 指向之前复制出来的 skin 文件

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 height: 300
}

// vue-cli 3.x 创建的 typescript 项目,将 url 中的 static 去掉,即 skin_url: '/tinymce/skins/lightgray'

同时在 mounted 中也需要初始化一次:

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

如果在这里传入上面的 init 对象,并不能生效,但什么参数都不传也会报错,所以这里传入一个空对象

三、扩展插件

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

tinymce 通过添加插件 plugins 的方式来添加功能

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

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

同时还需要在页面引入这些插件:

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

添加了插件之后,默认会在工具栏 toolbar 上添加对应的功能按钮,toolbar 也可以自定义

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

贴一下完整的组件代码:

<template>
 <div class='tinymce'>
  <h1>tinymce</h1>
  <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
  <div v-html='tinymceHtml'></div>
 </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
 name: 'tinymce',
 data () {
  return {
   tinymceHtml: '请输入内容',
   init: {
    language_url: '/static/tinymce/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/static/tinymce/skins/lightgray',
    height: 300,
    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
    toolbar:
     'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

四、上传图片

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目,还是得用 images_upload_handler 来自定义一个上传方法

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

这个方法会提供三个参数:blobInfo, success, failure

其中 blobinfo 是一个对象,包含上传文件的信息:

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

success 和 failure 是函数,上传成功的时候向 success 传入一个图片地址,失败的时候向 failure 传入报错信息

总结

以上所述是小编给大家介绍的在 Vue 项目中引入 tinymce 富文本编辑器的完整代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript奇异的arguments分析
Oct 20 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
Vue.js 踩坑记之双向绑定
May 03 #Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
You might like
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP反射学习入门示例
2019/06/14 PHP
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python的装饰器使用详解
2017/06/26 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
翻译学院毕业生自荐书
2014/02/02 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
简易版租房协议书范本
2014/10/13 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书