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

1.国产富文本编辑wangEditor

基于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

使用:

2.Quill

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

特性:

快速且轻量级

语意标签

标准化 HTML

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

使用方法:

3.bootstrap-wysiwyg

为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

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

使用:

引入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

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 富文本编辑器

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

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

功能精简,加载快速

输出格式化的标准 HTML

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

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

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

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

实例地址 :

https://www.zybuluo.com/mdeditor

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

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

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

责任编辑:

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

  1. html实现富文本编辑器,前端程序员福利,6款轻量级富文本编辑器,轻松实现富文本编辑...

    1.国产富文本编辑wangEditor 基于javascript跟css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义typecho 富文本编辑器,菜单栏可以自定义配置. 下载 ...

  2. 文本编辑器_国外程序员最爱的5种文本编辑器

    文本编辑器的选择是很多初学编程者在学习编程时需要考虑的问题之一,当前IT行业应用开发平台软件较多,可供程序员选择的文本编辑器类型较多,但是一个好的文本编辑器能够提高程序工作的效率,达到事半功倍的效果. ...

  3. 微信小程序加载并且编译显示富文本编辑器内容

    微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...

  4. web文本编辑器php源码,超级轻量web富文本编辑器HandyEditor

    HandyEditor 是一套十分轻量且同时适用于手机端和pc端的web富文本编辑器,主要用于让用户在网站上获得所见即所得编辑效果,可以用 HandyEditor 把传统的多行文本输入框(textar ...

  5. 富文本编辑器中空格转化为a_如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?...

    我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...

  6. Vue轻量级富文本编辑器-Vue-Quill-Editor

    先看效果图:女神镇楼        下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill(Vue-Quill-Editor需要依 ...

  7. KindEditor富文本编辑器【图片、视频等功能的富文本编辑器】

    官方下载地址:http://kindeditor.net/demo.php 下载插件: 简单模式.默认模式富文本编辑器: 默认模式html页面: <!DOCTYPE html> <h ...

  8. 一款轻量级的文本编辑器:FSNotes for Mac

    FSNotes是macOS的纯文本管理器, 我们的应用程序遵循以下开放格式:普通/文本,Markdown和RTF,并将数据存储在文件系统中.您可以在您最喜爱的外部编辑器中查看,编辑和复制数据,并查看F ...

  9. Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效(富文本编辑器)

    特效预览图 什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段 ...

最新文章

  1. java 常用正则表达式
  2. 这3句屁话,关键时刻能救命
  3. ThreadLocal使用和原理
  4. 【网络安全】OWASP基准测试测评篇
  5. matlab处理abaqus_Abaqus/用Abaqus进行参数分析(python+maltab助攻)
  6. awk中如何使用shell的环境变量
  7. linux通过命令行本地目录取消svn关联
  8. boost::foreach模块右值 const_r的测试程序
  9. 腾讯从百度挖来的AI Lab负责人张潼离职,要去阿里?...
  10. matlab虚拟现实之V-Realm Builder2中viewpoint节点的使用
  11. const 使用方法具体解释
  12. 让你的 Linux 远离黑客(二):另外三个建议
  13. TDengine C/C++ Connector
  14. msdev devenv 的命令行用法
  15. 数据结构与算法中的经典算法
  16. 建筑能源管理系统主要有什么功能?
  17. postman下载及安装
  18. 深入解密比Guava Cache更优秀的缓存-Caffeine
  19. 计算机网络重置,怎么重置电脑网络连接
  20. 灭霸级——如何选择最适合你的Linux发行版

热门文章

  1. BZOJ 4184 shallot
  2. [js实例] 验证身份证和姓名
  3. 二叉树的基本概念及性质
  4. iOS_判断手机是否越狱
  5. Xposed 与您的 ROM 似乎存在已知的问题 (Resources subclass)
  6. 【T2噬菌体】ASP.NET AJAX客户端编程之旅(三)—数据转换序列化
  7. 哈工大计算机系统大作业2022春
  8. win7系统wifi没有网络连接到服务器,win7没有无线网络连接的解决方法
  9. 过零丁洋【作者】宋 文天祥
  10. Anaconda Jupyter notebook 如何进入D盘