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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
富文本编辑器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
linux下实现定时执行php脚本
2015/02/13 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
js编写选项卡效果
2017/05/23 Javascript
vue组件学习教程
2017/09/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python中的字典操作及字典函数
2018/01/03 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python读取xlsx的方法
2018/12/25 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
元旦晚会策划方案
2014/02/18 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
农村文化建设标语
2014/10/07 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
敬老院活动感想
2015/08/07 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
创业计划书之农家乐
2019/10/09 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis