项目中的富文本编辑器该如何选择?

编程范儿
• 阅读 2188

项目中的富文本编辑器该如何选择?

项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?

先看看市面上都有哪些可用的富文本编辑器:

  • TinyMCE(插件式的,支持 VueReactAngular 框架)
  • wangEditor(Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3React
  • UEditor(开源,插件多,功能齐全,支持 JS 直接引入使用)
  • CKEditor(模块化的简洁强大,丰富的框架支持,支持 VueReactAngularJqueryElectron 框架)
  • Quill-editor(轻量、简洁,支持 JS 直接引入使用,VueAngularReact

由于项目中有一条必不可少的需求是可直接复制 Excel 中内容和格式到编辑器中,分别研究了以上等编辑器,只有TinyMCE支持的比较好,因为它是插件式的,powerpaste 很少地做到了这一点。

然而问题又来了,我们开发喜欢使用开源免费的,这个插件是收费的功能。也就是说 TinyMCE 是半开源的,基础功能是免费的,而涉及到复杂功能则需要收费。

正常的收费肯定就有破解的,或者网友共享出来的。通过搜索我们找到了一个低版本的 powerpaste 的插件 4.8.2,以下就来介绍下使用过程。

安装依赖包

Vue 项目中使用,需要安装以下包文件

"dependencies": {
    "@tinymce/tinymce-vue": "3.2.8",
    "tinymce": "4.8.2",
  }

封装组件

然后我们封装一个组件,在组件中引入该富文本组件,向外暴露参数可灵活使用。

模板代码,只提供初始化 init 参数

<template>
  <div class="tinymce-box">
    <editor
      v-model="myValue"
      ref="edit"
      :init="init"
    >
    </editor>
  </div>
</template>

然后引入 tinymcetinymce-vue 两个包文件,和主题文件

<script>
  import tinymce from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/modern'
</script>

配置参数

data 里针对 init 配置参数进行设置

export default {
    components: { Editor },
    data() {
      return {
        myValue: '',
        init: {
          menubar: false,
          height: 400,
          skin_url: '/tinymce/skins/lightgray',
          plugins: 'code colorpicker image link lists preview table',
          external_plugins: {
            'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'
          }
        }
      }
    },
    mounted() {
      tinymce.init({})
    }
}

项目中的富文本编辑器该如何选择?

menubar 是控制菜单栏显示的,主要的功能是通过 plugins 属性配置的,里面是字符串通过空格隔开。这里的 external_plugins 属性是拓展插件需要的,不仅支持官方的插件,还支持自己独立开发的功能。

引入拓展插件

由于通过 npm 安装是没有 powerpaste 插件的,我们可以下载了放在 public 目录下,通过 external_plugins 来配置使用。

项目中的富文本编辑器该如何选择?

最后

验证效果,我们从左侧这样的一个 Excel 文件中把表格复制出来,黏贴到富文本编辑器中

项目中的富文本编辑器该如何选择?

会弹出提示,需不需要附带格式一起,于是我们选择保持格式。

项目中的富文本编辑器该如何选择?

整个代码如下:

<template>
  <div class="tinymce-box">
    <editor v-model="myValue"
      ref="edit"
      :init="init"
    >
    </editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/modern'

  // 更多插件参考:https://www.tiny.cloud/docs/plugins/
  import 'tinymce/plugins/image'// 插入上传图片插件
  import 'tinymce/plugins/media'// 插入视频插件
  import 'tinymce/plugins/table'// 插入表格插件
  import "tinymce/plugins/link";
  import "tinymce/plugins/code";
  import 'tinymce/plugins/lists'// 列表插件
  import 'tinymce/plugins/wordcount'// 字数统计插件
  import "tinymce/plugins/colorpicker";
  import "tinymce/plugins/textcolor";
  import "tinymce/plugins/contextmenu";
  import "tinymce/plugins/preview"
  import "tinymce/plugins/hr"

  export default {
    components: { Editor },
    data() {
      return {
        myValue: '',
        init: {
          menubar: false,
          height: 400,
          skin_url: '/tinymce/skins/lightgray',
          toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
          plugins: 'code colorpicker image link lists preview table',
          external_plugins: {
            'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'
          }
        }
      }
    },
    mounted() { // 这个是必要的,初始化的时候需要给init 一个空对象,不然报错
      tinymce.init({})
    }
  }
</script>

项目中的富文本编辑器该如何选择?

点赞
收藏
评论区
推荐文章
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
summernote富文本编辑器
官网:https://summernote.org/它的特点:开源使用Bootstrap3.xx到4.xx轻量级(jscss:100Kb)智能用户交互适用于所有主要浏览器:Safari,Chrome,Firefox,Opera,Edge和InternetExplorer9
Easter79 Easter79
3年前
ssm项目中ueditor富文本编辑器的使用
一、下载 https://ueditor.baidu.com/website/index.html  将ueditor放到项目中合适的位置  !(https://oscimg.oschina.net/oscnet/429e83cb838b1eb4ed6dd0d348481174948.png)二、配置文件上传路径   在utf8js
Easter79 Easter79
3年前
Spring之WebSocket
初次学习WebSocket。在本次写的WebSocketDemo里使用到了如下插件(技术):1.百度的富文本编辑器:http://ueditor.baidu.com/website/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fueditor.baidu.com%2Fwebsit
Wesley13 Wesley13
3年前
JS过滤(去除)富文本编辑器中的HTML标签和换行回车等标记的正则表达式
使用正则去掉富文本编辑器的THML标签和换行回车等标记实际中的例子:代码实现:react中js的写法:this.fiterLabelHandle(this.state.majorInfoList.schemeIntroduce);//调用过滤掉没用的格式或字符的方法其中this.state.majorInfoList.sc
Wesley13 Wesley13
3年前
Neditor 富文本编辑器介绍
Neditor富文本编辑器介绍Neditor是我们团队基于Ueditor的一款富文本编辑器。不论从功能还是从其它各方面来讲,Ueditor都是一款无以替代的编辑器产品。只是已经不符合现代化样式的需求,于是我们修改它的样式,实现了这样的效果:!image(https://www.notadd.com/s
Easter79 Easter79
3年前
Summernote文本编辑器入门
1、summernote是一个界面比较简洁美观的富文本编辑器。2、文件导入(官方下载地址:http://summernote.org/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fsummernote.org%2F))下载回来的文件夹是这样的:!(https://osc
Stella981 Stella981
3年前
CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
  因业务需求,要在vue2.0的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用。因CKEditor5 文档比较少,此处记录下引用和一些基本用法。CKEditor5官网https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.
Wesley13 Wesley13
3年前
UEditor使用说明
UEditor使用说明UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。 !(https://oscimg.oschina.net/oscnet/c5da02e392bca54c54520b8f38d0b
新增富文本单元格和XSS过滤器
一.富文本单元格        皕杰设计器新增了单元格富文本类型,我们在一些网站编辑文章的时候经常可以看到富文本和markdown等编辑器,其中以Word为例,输入文字后,选择不同的功能(通常是通过点击某个图标),例如加粗或者调整字体大小,处理
编程范儿
编程范儿
Lv1
男 · 先导智能装备股份有限公司 · 软件开发工程师
让前端编程更有范儿
文章
5
粉丝
0
获赞
3