免费JS富文本编辑器 总有一款会适合你
什么是富文本编辑器?
概述:
javascript Text Editor
我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器
,包括很多论坛
发帖的文字窗口也是典型的富文本编辑器
, 它跟office
中的word
界面非常类似!
富文本编辑器
的使用是与word
非常类似的,所见即所得的排版方式,操作也与word
类似,点击鼠标使用相应功能就行,对用户而言使用上相对比较简单,也比较容易进入状态!
如图
总的来说富文本编辑器
就是一种基于JS
并且可内嵌于web浏览器
中所见即所得的文本编辑器!
富文本编辑器不同于普通的文本编辑器,开发者可到网上下载免费的富文本编辑器
内嵌于网站应用程序里面, 那么作为一个开发者,熟悉几款富文本编辑器
是很有必要的,说不一定某个项目就要集成进去,到时候现就不会去花太多时间研究它!
介绍几款主流常用的JS富文本编辑器
下面列举几款常用的富文本编辑器,供大家参考!
1.TinyMCE
概述
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala
等等, 并且界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。
支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。
而且这么好的东西还是开源免费的,而且一直有人维护,这款编辑器使用的人非常多 , TinyMCE
自带的大部分插件均提供社区开源版,可免费使用且可商用!
下载
下载地址:
https://www.tiny.cloud/
使用参考:
http://tinymce.ax-z.cn/
根据需要下载社区版
或者开发版
小提示
开发版
包含未被压缩过的源码,方便开发者学习分析, 也就是说开发版
包含TinyMCE社区版
,开发工具和完整的源代码!
快速使用
步骤1
:引入TinyMCE
JS脚本
在<head>
中插入如下代码,注意自己的项目路径, 将tinymce.min.js源文件
引入至项目中
<script src="TinyMCE/js/tinymce/tinymce.min.js"></script>
步骤2:
初始化TinyMCE
, 将TinyMCE
初始化为页面的一部分
当引用了TinyMCE.js
后就可以使用tinymce.init()方法
来进行初始化了,并且tinymce.init()方法
内部接收一个初始化对象, 内部包含各种参数,必须的参数就是selector
意思是允许通过css选择器
指定TinyMCE
要绑定的html内容容器
,传统模式需指定textarea
,内联模式可指定div
或其它html块元素
举个栗子
//js
<script>tinymce.init({selector: '#test',skin: 'oxide-dark'});
</script>
//html
<h1>Dome1</h1>
<div id="test">测试数据!</div>
效果如下
注意:
当然这里建议新手还是使用textarea
元素, TinyMCE
会将内容塞进textarea元素
,可以通过正常的post方法
获取到编辑器中的内容, 如果你使用第三方框架
或采用其他元素配合ajax
提交则可能不会主动触发内容同步,需要自己执行同步 或者 自己执行dom操作
来获取内容!
2.CKEditor
概述
Ckeditor
也是一款非常经典的富文本编辑器,官方下载量过千万,它是在非常著名的FCkEditor
基础上开发的新版本。Ckeditor
有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。
官方地址: https://ckeditor.com/
使用参考: https://ckeditor.com/docs/index.html
下载
点击下载按钮
根据需要下载
快速使用
步骤1
:引入Ckeditor
JS脚本
在<head>
中插入如下代码,注意自己的项目路径, 将ckeditor.js源文件
引入至项目中
<script src="ckeditor/ckeditor.js"></script>
步骤2:
初始化Ckeditor
CKEditor
就像一个在你网页中的文本区域一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易。实际上CKEditor
就是使用一个文本区域来传递它的数据到服务器上,所以,你必需在页面上创建一个文本容器,这里建议使用<textarea></textarea>
。
引用ckeditor.js
后就可以使用ClassicEditor.create()
来进行创建编辑器,ClassicEditor.create()
内部参数为指定的Ckeditor
要绑定的文本容器。
举个栗子
//js
<script>window.onload = function(){ClassicEditor.create(document.querySelector("#editor"))}
</script>
//html
<h1>demo2</h1>
<textarea id="editor"></textarea>
效果如下
3.wangEditor
概述
wangEditor
是一款使用 Typescript 开发的无框架依赖Web 富文本编辑器, 轻量、简洁、易用、开源免费。
它兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11
。但是不支持移动端。
下载地址:https://www.wangeditor.com/
使用地址:https://www.wangeditor.com/doc/
下载
进入到以下页面
我们只需要将wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。
快速使用
步骤1
:引入wangEditor
JS脚本
在<head>
中插入如下代码,注意自己的项目路径, 将wangEditor.js或者wangEditor.min.js源文件
引入至项目中
<script src="ckeditor/wangEditor.min.js"></script>
步骤2:
初始化wangEditor
你需要在页面上创建一个文本容器,然后利用以下代码就可以实现这个编辑器了。
举个栗子
//js
<script>window.onload=function(){let E = window.wangEditor;let editor = new E("#editorBox");editor.create();}
</script>
//html
<h1>demo3</h1>
<div id="editorBox"></div>
效果如下
4.Kindeditor
概述
KindEditor
是一套使用JavaScript编写的开源的HTML可视化编辑器,让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器
。KindEditor非常适合在CMS、商城、论坛、博客、电子邮件等互联网应用上使用。
下载地址:http://kindeditor.net/down.php
使用地址:http://kindeditor.net/docs/index.html
下载
快速使用
步骤1
:引入KindEditor
JS脚本
在<head>
中插入如下代码,注意自己的项目路径, 将kindeditor-all-min.js或者kindeditor-all.js源文件
引入至项目中,并且还要将文件夹lang
的zh-CN.js
引入到项目中,如下:
<script src="kindEditor/kindeditor-all-min.js"></script>
<script src="kindEditor/lang/zh-CN.js"></script>
步骤2:
初始化KindEditor
在需要显示编辑器的位置添加textarea输入框。注意必须给textarea
设置一个id或者类class选择器,建议使用id选择器,因为id选择器是页面独一无二的,而类class选择器可以存在多个,容易产生混乱。
举个栗子
//js
<script>KindEditor.ready(function(K) {window.editor = K.create('#editorBox');});
</script>
//html
<h1>demo4</h1>
<textarea id="editorBox" name="content">测试内容</textarea>
效果如下
5.Simditor
概述
Simditor
是Tower平台
使用的富文本编辑器,是一款基于jQuery和module.js
,轻量化开源的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。支持的浏览器:IE10+、Chrome、Firefox、Safari
。
下载地址:https://github.com/mycolorway/simditor/releases
使用地址:https://simditor.tower.im/docs/doc-usage.html
下载
快速使用
步骤1
:引入Simditor
相关的JS与CSS文件
在<head>
中插入如下代码,注意自己的项目路径, 将以下文件引入到项目中,如下:
<link rel="stylesheet" href="simditor/site/assets/styles/simditor.css"/>
<script src="simditor/jQuery.min.js"></script>
<script src="simditor/site/assets/scripts/module.js"></script>
<script src="simditor/site/assets/scripts/hotkeys.js"></script>
<script src="simditor/site/assets/scripts/simditor.js"></script>
以上文件除了jQuery.min.js
需要单独下载外,simditor.css
、module.js
、hotkeys.js
、simditor.js
到你下载的Simditor
中的site/assets
文件夹中去找。还要注意js文件的引入顺序,Simditor是基于jQuery和module.js
,所以要引入到simditor.js
之前。
步骤2:
初始化Simditor
要使用 Simditor,首先你需要一个textarea
这样的元素,并且给textarea
设置一个id选择器。
举个栗子
//js
<script>$(function(){Simditor.locale = 'zh-CN';//设置中文var editor = new Simditor({textarea: $('#editorBox'), //textarea的id})})
</script>
//html
<h1>demo5</h1>
<textarea id="editorBox" name="content">测试内容</textarea>
效果如下
6.Summernote
概述
Summernote
是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。它是基于jquery和bootstrap
,使用前先引入这两项。
下载地址:https://summernote.org/
使用地址:https://summernote.org/getting-started/#get-summernote
下载
快速使用
步骤1
:引入Summernote
相关的JS与CSS文件
在<head>
中插入如下代码,注意自己的项目路径, 将以下文件引入到项目中,如下:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="js/jQuery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="summernote/summernote.min.css"/>
<script src="summernote/summernote.min.js"></script>
步骤2:
初始化Summernote
在你希望页面中呈现 Summernote 编辑器的位置设置一个文本容器,并且给文本元素
设置一个id选择器。
举个栗子
//js
<script>$(document).ready(function() {$('#summernote').summernote();});
</script>
//html
<h1>demo6</h1>
<div id="summernote"><p>Hello Summernote</p></div>
效果如下
7.Quill
概述
Quill
是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。
下载地址:https://quilljs.com/docs/download/
使用地址:https://quilljs.com/docs/quickstart/
注意:Quill
的使用文档是英文的,英语不好的可以借助翻译软件!!!!
下载
进入一下页面
快速使用
步骤1
:引入Quill
相关的JS与CSS文件
在<head>
中插入如下代码,注意自己的项目路径, 将以下文件引入到项目中,如下:
<link rel="stylesheet" href="quill/quill.bubble.css"/>
<link rel="stylesheet" href="quill/quill.snow.css"/>
<link rel="stylesheet" href="quill/quill.core.css"/>
<script src="quill/quill.core.js"></script>
<script src="quill/quill.min.js"></script>
步骤2:
初始化Quill
在你希望页面中呈现 Quill
编辑器的位置设置一个文本容器,并且给文本元素
设置一个id选择器。
举个栗子
//js
<script>var quill = new Quill('#quill', {theme: 'snow',modules: {toolbar: [[{header: [1, 2, 3, false]}],['bold', 'italic', 'underline'],[{'list': 'ordered'}, {'list': 'bullet'}],[{'align': []}],[{'font': []}],[{'color': []}, {'background': []}],['image', 'video']]}});
</script>
//html
<h1>demo7</h1>
<div id="quill"><p>Hello Quill</p></div>
效果如下
end
以上的JS编辑器
的详细使用请参照官方以及相关文档,根据你的项目需求,挑选出适合的富文本编辑器,希望对你有所帮助!!
谢谢您的阅读!! !
"点赞" "评论" "收藏"
大家的支持就是我坚持下去的动力!
如果以上内容有任何错误或者不准确的地方,欢迎在下面
免费JS富文本编辑器 总有一款会适合你相关推荐
- 五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...
- 【效率】几个免费的富文本编辑器,这不完胜付费?
所以今天给大家分享几款我用过的.觉得值得一用的.开源免费 的富文本编辑器,甚至可以说是完胜国外的付费编辑器(付费的自己还不方便修改和定制). 富文本编辑器推荐 editor.md GitHub:htt ...
- 几个免费的富文本编辑器,这不完胜付费?
一.富文本编辑器推荐 1.editor.md GitHub:https://github.com/pandao/editor.md Star 数:12k 这是目前我个人最看好的国内的富文本编辑器,只学 ...
- js富文本编辑器_自制富文本编辑器
前言 介绍一款 markdown富文本编辑器 源码 https://gitee.com/pingfanrenbiji/markdown-nice 这里要感谢一些开源作者 这位大佬的微信公众号是 本地启 ...
- Vue/js 富文本编辑器、excel编辑器合集
Vue 富文本编辑器 wangEditor JMEditor vue-quill-editor vue2-editor simditor kindeditor ueditor tinymce cked ...
- 14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- 【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器 前言 一.富文本编辑器介绍 二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器 三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
- 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
富文本编辑器 富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文 ...
- 14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- 【富文本编辑器】Ueditor的demo——创建、修改——代码使用
文章目录 富文本编辑器 简述: 使用: 1.下载的demo: 2.项目创建: 3.修改代码: 4.使用富文本编辑器: 示例: 富文本编辑器 Ueditor的资源官网:http://fex.baidu. ...
最新文章
- android app数据库数据存放
- 求一个集合的所有子集 Python实现
- 写了一阵子多线程之后需要注意的几点
- SQL SERVER With语法[转]
- 在CentOS上安装MongoDB
- 算法设计与分析——回溯法——装载问题
- 基于D3.js实现分类多标签的Tree型结构可视化
- 关于Excel的最大行数和列数。
- 图像仿射变换python实现
- ios 对日期的处理(包括计算昨天时间、明天时间)
- 2019人工智能写作软件
- Python 开发环境Spyder介绍 【初学者友好】
- 【Deel learning之一 】激活函数
- 5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
- python 将图片中的颜色进行替换
- 电脑版微信怎么双开、多开 超级简单
- 连接到服务器 ------------------------------ 无法连接到 + SQL Server 请求失败或服务未及时响应....解决思路
- RabbitMQ开发工具包
- Core Fusion- Accommodating Software Diversity in Chip Multiprocessors .md
- Mac全选,剪切和复制粘贴
热门文章
- 2018华为数通技术大赛复赛拓扑具体配置
- python图像处理(十一)——图像锐化与边缘检测之Roberts算子、Prewitt算子、Sobel算子、Laplacian算子
- BNUOJ-4049-四叉树
- 在MinGW中构建GCC交叉编译器和GDB交叉调试器
- android超频闪退,显卡超频后玩游戏闪退 | 手游网游页游攻略大全
- 汇编语言指令用法大全
- 基于LM317的直流稳压电源设计
- 2019秋招 | 中国农行软开面试
- 十个相见恨晚的编程工具
- 职称计算机 将计算机broad_1下的e盘映射为k盘网络驱动器,计算机职称考试题目(网络基础答案)...