vue2.0 实现富文本编辑器功能


Posted in Javascript onMay 26, 2019

前端富文本编译器使用总结:

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

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

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

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

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

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

在这里着重说一下这个 tinymce这个插件,

优势有三:

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

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

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

上代码(vue中使用)

1.引入

npm install @tinymce/tinymce-vue -S

2.在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

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

3.给你们个语言包(https://www.tiny.cloud/download/language-packages/)地址都给了要是还不会那就没救了

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

5.import

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

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

<editor id="tinymce" v-model="tinymceHTML" :init="tinymceInit"></editor>

这里的 init 是 tinymce 初始化配置项,后面会讲到一些关键的 api,完整 api 可以参考https://www.tiny.cloud/docs/configure/

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

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
    }
  }
 },

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

mounted(){
tinymce.init({}) // 特别注意这个空对象的存在,如果这个初始化空对象不存在依旧会报错
}

完整代码如下:

<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>

其中的带plugins为扩展性操作,如果不需要,可以不引入。

效果如下图:

vue2.0 实现富文本编辑器功能

总结

以上所述是小编给大家介绍的vue2.0 实现富文本编辑器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 #Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 #Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 #Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
You might like
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python类的继承实例详解
2017/03/30 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python的pip安装以及使用教程
2018/09/18 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
2014年班主任自我评价范文
2014/04/23 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
财务负责人岗位职责
2015/02/03 职场文书
民事辩护词范文
2015/05/21 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书