在 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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JavaScript函数模式详解
Nov 07 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
Javascript实现单选框效果
Dec 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python OS模块实例详解
2019/04/15 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
历史系自荐信范文
2013/12/24 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
大学校务公开实施方案
2014/03/31 职场文书
五心教育心得体会
2014/09/04 职场文书
企业党员个人自我评价
2014/09/20 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python