android前端代码编辑器,前端程序员福利,6款轻量级富文本编辑器

原标题:前端程序员福利,6款轻量级富文本编辑器

1.国产富文本编辑wangEditor

a9a38e1503c22e164c120ab19842cba4.png

基于java和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费,样式可自定义,菜单栏可以自定义配置。

下载:

直接下载:https://github.com/wangfupeng1988/wangEditor/releases

使用npm下载:npm install wangeditor (注意 wangeditor 全部是小写字母)

使用bower下载:bower install wangEditor (前提保证电脑已安装了bower)

使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js

使用:

f41fba289837af8216e880fd12907975.png 2.Quill

dd8f577a75d4d3e06c806fc87eebecb0.png

Quill 是一个开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制。

特性:

快速且轻量级

语意标签

标准化 HTML

支持 Chrome, Firefox, Safari, and IE 9+

使用方法:

db878d142bfd29f71d22b9b23d4567e4.png 3.bootstrap-wysiwyg

04a8da09552bcc9a482fbd042b123f01.png

为Bootstrap定制的微型所见即所得(What you see is what you get)富文本编辑器。

主要特色:

在Mac和Wndows平台上能够自动针对常用操作绑定标准热键

可以通过拖拽插入图片;支持图片上传(也可以获取移动设备上的照片)

语音识别输入(仅限Chrome浏览器)

允许自定义工具条;不生成额外标签;支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性

没有强制规定的样式 - 一切都由你做主

依赖浏览器的标准特性,没有非标准代码;工具条和键盘功能均可定制,并且能够执行任何浏览器支持的命令

不会自己创建一个单独的frame、备份文本区等 - 本编辑器尽量保持简单,并仅仅运行在一个DIV内

(可选)清除尾部空格;清除空的div和span

必须运行在现代浏览器上(在Chrome 26、Firefox 19、Safari 6上经过测试,用户报告称可以在IE10上工作)

支持移动设备浏览器(在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过) 3.JQUERY NOTEBOOK

911e756c1c411d3b28ef9b64cb9b4db7.png

一个简单,干净,优雅的所见即所得的富文本编辑器.用鼠标选中文字可看到效果。

使用:

引入css文件:

引入js文件:

< type="text/java" src="src/js/libs/jquery-1.10.2.min.js">>

< type="text/java" src="src/js/jquery.notebook.js">>

HTML代码:

$(document).ready(function(){

$('.my-editor').notebook();

}); 4.轻量级文本编辑器Trumbowyg

ec42f63a8983d06d244193bb83b0c3c8.png

Trumbowyg一个轻量级文本编辑器,简洁漂亮的设计,生成语义代码,有一个强大的API。 编辑生成的代码进行了优化,HTML5的支持。 兼容浏览器IE7 +,Chrome,Opera和Firefox。 只有15 kb这意味着更快的页面加载。

使用方法:

首先,添加jQuery到页面

位置:

< src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">>

在这之后,你必须加载Trumbowyg。

< src="js/vendor/trumbowyg.min.js">>

别忘了Trumbowyg CSS到

,或负载编辑您自己的风格。

基础知识

这最少的代码将一个简单的div Trumbowyg到神奇的WYSIWYG编辑器。

$('#trumbowyg-demo').trumbowyg();

如果你想设置Trumbowyg选项,添加一个包含你的选择对象作为参数。

$('#trumbowyg-demo').trumbowyg({

fullscreenable: false,

closable: true,

btns: ['bold', 'italic', '|', 'insertImage']

}); 5.Simditor 富文本编辑器

23c5c86f36f18f03476ecc0090c8832b.png

Simditor 是团队协作工具 Tower 使用的富文本编辑器。功能精简,加载快速。

相比传统的编辑器它的特点是:

功能精简,加载快速

输出格式化的标准 HTML

每一个功能都有非常优秀的使用体验

兼容的浏览器:IE10+、Chrome、Firefox、Safari。

使用方法这里就不说了,和其他编辑器大致一致。 6.Cmd Markdown 编辑阅读器

c9db14a36243869ac4b78816c8519015.png

Markdown 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档。

实例地址 :

https://www.zybuluo.com/mdeditor

欢迎各位程序员们补充这里没有提到的,性能更好的编辑器。

好东西就要分享,让更多的人看到。

如果你喜欢,就请关注科技男。返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值