在 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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
js定时器实例分享
Dec 20 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
装修致歉信
2014/01/15 职场文书
2014年情人节活动方案
2014/02/16 职场文书
手工社团活动方案
2014/02/17 职场文书
主题党日活动总结
2014/07/08 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
开除通知书范本
2015/04/25 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
JavaScript的Set数据结构详解
2022/02/18 Javascript