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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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编写大型网站问题集
2007/03/06 PHP
php下将XML转换为数组
2010/01/01 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
使用Apache的rewrite
2021/03/09 Servers
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
python编写的最短路径算法
2015/03/25 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python列表list排列组合操作示例
2018/12/18 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
深入浅析Python中的迭代器
2019/06/04 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python实现实时视频流播放代码实例
2020/01/11 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
什么是继承
2013/12/07 面试题
教师敬业奉献模范事迹材料
2014/05/18 职场文书
企业文化演讲稿
2014/05/20 职场文书
拓展策划方案
2014/06/03 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
高一语文教学反思
2016/02/16 职场文书
python状态机transitions库详解
2021/06/02 Python