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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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安全配置详细说明
2011/09/26 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
javascript的函数
2007/01/31 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python实现将xml导入至excel
2015/11/20 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python如何求圆的面积
2020/07/01 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
护理专业毕业生推荐信
2013/10/31 职场文书
火灾现场处置方案
2014/05/28 职场文书
财务人员入职担保书
2015/09/22 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers