4款Bootstrap在线富文本编辑器

Bootstrap 已经大大简化响应式 web 开发，但是，如果再加上不用手动一点点敲代码，而是可以快速选择你想要使用的 Bootstrap 组件，然后直接将其拖进你的画板中，开发是否会变得更加轻松？！

这便是所谓的所见即所得（What you see is what you get，WYSIWYG）开发模式，能帮你达成这一切的，便是“所见即所得编辑器”。

所见即所得编辑器通常分为以下两大类：

富文本编辑器
框架编辑器

富文本编辑器侧重于网页中大块连续文本的格式编辑，基本编辑样式包括：字体、颜色、列表、链接、图片等等，一般所生成的内容都是作为网页的主体展示给用户。

框架编辑器则用于快速搭建网页的整体布局，操作时，更多的是组件的选择与拖放，以达到高效、批量地生产静态页面的目的，一般可操作的组件有：导航、列、行、面板等等。

本文会将所有流行的 Bootstrap 富文本编辑器集中介绍给大家。

而在另一篇文章中，将会重点介绍上述提及的框架编辑器，详见：

Bootstrap 在线框架编辑器：http://classfoo.com/ccby/article/LfVtbU9

CKEditor 是目前最优秀的免费、开源 web 富编辑器之一。

主要特点：

免费开源社区驱动大量插件高度可定制编辑体验流畅兼容所有主流浏览器

默认不支持 Bootstrap 样式，但其高度可配置可以轻松的满足这一要求。

需要考虑的：

如果想自定义特性，需要一定的初期学习成本。
功能完善导致架构复杂，使得体积稍显臃肿（作为前台编辑器时，可能会考虑）。
需求特殊，且无插件可以满足时，如果考虑修改核心代码成本高昂。
国内无核心社区。

官网：http://ckeditor.com/

在线例子：http://ckeditor.com/demo

下载地址：http://ckeditor.com/download

官方文档：http://docs.cksource.com/Main_Page

开源地址：https://github.com/ckeditor/ckeditor-dev

Tinymce 是目前最优秀的免费、开源 web 富编辑器之一。

主要特点：

免费开源社区驱动大量插件高度可定制编辑体验流畅兼容所有主流浏览器

默认不支持 Bootstrap 样式，但其高度可配置可以轻松的满足这一要求。

需要考虑的：

如果想自定义特性，需要一定的初期学习成本。
功能完善导致架构复杂，使得体积稍显臃肿（作为前台编辑器时，可能会考虑）。
需求特殊，且无插件可以满足时，如果考虑修改核心代码成本高昂。
国内无核心社区。

官网：http://www.tinymce.com/index.php

在线例子：http://www.tinymce.com/tryit/basic.php

官方文档：http://www.tinymce.com/wiki.php

下载地址：http://www.tinymce.com/download/download.php

开源地址：https://github.com/tinymce/tinymce

Tinymce 与 CKEditor 是 web 富编辑器的两大阵营，分别占领了一定的富编辑器市场，如果一定要做个对比，较明显的区别如下：

两者都提供了极其丰富的插件，但相比来说，同样的功能，CKEditor 的选项会多很多，尽量减少直接修改源码的可能。
对于拷贝粘贴，CKEditor 更加友好，它总是能更加精确的替换来源网站的标签。
新特性来说，CKEditor 也总是能领先其对手一步，更重要的是，它的开发者文档非常完善。
大小上，Tinymce 具有明显优势，其几乎是 CKEditor 的一半，这也是后者为其它优势所付出的代价。

UEditor 是由百度 WEB 前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

开源基于 BSD 协议，所有源代码在协议允许范围内可自由修改和使用。

官网：http://ueditor.baidu.com/website/index.html

在线例子：http://ueditor.baidu.com/website/onlinedemo.html

官方文档：http://fex.baidu.com/ueditor/

下载地址：http://ueditor.baidu.com/website/download.html

CFEditor

这是 classfoo.com 全站所使用的所见即所得（WYSIWYG）富编辑器（Rich Editor），其使用 BootStrap 3.x 样式，最低支持 IE 8。

官网：http://classfoo.com/app/editor

在线例子：http://classfoo.com/app/editor

下载地址：https://github.com/ethan-chan/CFEditor

开源地址：https://github.com/ethan-chan/CFEditor

原文来自：http://classfoo.com/ccby/article/e3KsbU8

4款Bootstrap在线富文本编辑器相关推荐

在线富文本编辑器 UMeditor
2019独角兽企业重金招聘Python工程师标准>>> UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器. UM的主要特点就是容 ...
三甲：在线富文本编辑器的架构设计及实践
12月5日, 极客邦(InfoQ)在深圳举办 GMTC 大会,蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享<在线富文本编辑器的架构设计及实践>,以下内容是根据现场演讲收集整理. 大家下 ...
几款常用的富文本编辑器总结
导航百度富文本编辑器(UEditor) 基本demo 基本API 拓展相关注意事项 Summernote 基本demo 基本api 扩展相关 Froala 基本demo 基本api 扩展相关注意 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
在线富文本编辑器-基于Web的HTML编辑器大全（一）
基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或是一个富文本的编辑器,是我们在开发WEB应用和内容管理系统时接收用户输入时必需要考虑的问题.下面是网上牛人收集的一些开源的WEB在线的 ...
java实现在线富文本编辑器，并传格式数据给后端
做了一个简易在线的富文本编辑器,前端是html,后台是Java 前端代码: <html lang="en" xmlns:th="http://www.thymele ...
在线富文本编辑器FckEditor配置（.Net Framework 3.5）
进入FCKeditor文件夹,编辑 fckconfig.js 文件. 1.上传设置 . var _FileBrowserLanguage = 'php' ; // ...
一款优秀的富文本编辑器element tiptap的使用
一.安装终端执行命令 yarn add element-tiptap 二.引入局部引入和注册组件 import {ElementTiptap,Doc,Text,Paragraph,Heading, ...
基于bootstrap的富文本编辑器summernote的用法
初次用到这个工具,在取值这步就掉坑里了,很多文章写的取值是 var content = $('#summernote').summernote('code');我只能说我是半天取不了值,还以为是取到的 ...
14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

4款Bootstrap在线富文本编辑器

4款Bootstrap在线富文本编辑器相关推荐

最新文章

热门文章