富文本插件推荐

富文本

管理后台富文本也是一个非常重要的功能,楼主在这里也踩了不少的坑。楼主在项目里最终选择了tinymce
这里在简述一下推荐使用tinymce的原因:tinymce是一家老牌做富文本的公司(这里也推荐ckeditor,也是一家一直做富文本的公司,也不错),它的产品经受了市场的认可,不管是文档还是配置的自由度都很好。在使用富文本的时候有一点也很关键就是复制格式化,之前在用一款韩国人做的富文本summernote被它的格式化坑的死去活来,但tinymce的去格式化相当的好,它还有一个增值项目就是powerpaste,那是无比的强大,支持从word里面复制各种东西,都不会有问题。富文本还有一点也很关键,就是拓展性。楼主用tinymce写了好几个插件,学习成本和容易度都不错,很方便拓展。最后一点就是文档很完善,基本你想得到的配置项,它都有。tinymce也支持按需加载,你可以通过它官方的build页定制自己需要的plugins。
我再来分析一下市面上其它的一些富文本:

  • summernote 先来说一个我绝对不推荐的富文本。这是一个韩国人开源的富文本(当然不推荐的理由不是因为这个^_^),它对很多富文本业界公认的默认行为理解是反起到而行的,而且只用了一个dialog的功能,引入了boostrap,一堆人抗议就是不改。格式化也是懒得一批。。反正不要用!不要用!不要用!

  • ckeditor ckeditor也是一家老牌做富文本的公司,楼主旧版后台用的就是这个,今年也出了4.0版本,ui也变美观了不少,相当的不错,而且它号称是插件最丰富的富文本了。推荐大家也可以试用一下。

  • quill 也是一个非常火的富文本,长相很不错。基于它写插件也很简单,api设计也很简单。楼主不选择它的原因是它对图片的各种操作不友善,而且很难改。如果对图片没什么操作的用户,推荐使用。

  • medium-editor 大名鼎鼎的medium的富文本(非官方出品),但完成度还是不很不错,拓展性也不错。不过我觉得大部分用户还是会不习惯medium这种写作方式的。

  • Squire 一个比较轻量的富文本,压缩完才11.5kb,相对于其它的富文本来说是非常的小了,推荐功能不复杂的建议使用。

  • wangEditor 一个国人写的富文本,用过感觉还是不错的。不过毕竟是个人的,不像专门公司做富文本的,配置型和丰富性不足。前端几大禁忌就有富文本 为什么都说富文本编辑器是天坑?,不过个人能做成这样子很不容易了。

  • 百度UEditor 没有深入使用过,只在一个angular1X的项目简单用过,不过说着的ui真的不好看,不符合当今审美了,官方也已经很久没跟新过了。

一、使用vue-quill-editor富文本插件

npm安装: npm install vue-quill-editor -- save
<template>
  <div>
    <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
  </div>
</template>

<script>
  import {quillEditor} from 'vue-quill-editor'; // 导入quillEditor组件
  export default {
    data: function () {
      return {
        content: 'this is a simple demo',                // 编辑器的内容
        editorOption: {             // 编辑器的配置
          // something config
        }
      }
    },
    components: {
      quillEditor                 // 声明组件quillEditor
    }
  }
</script>

二、效果图
这里写图片描述

关注我的技术公众号《漫谈人工智能》,每天推送优质文章

两只橙 CSDN认证博客专家 TensorFlow NLP 神经网络
全球AI挑战赛百强选手,曾任职于腾讯微信事业部,魅族flyme事业部,现任中国平安AI研发工程师。《深度学习500问》作译者,CSDN博客专家及签约讲师,指弹吉他爱好者,简书专栏作家。
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 59.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值