在 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调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
JavaScript中10个Reduce常用场景技巧
Jun 21 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
自主招生自荐信
2013/12/08 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python