快捷搜索:  汽车  科技

可看到代码的富文本编辑器(前端程序员福利)

可看到代码的富文本编辑器(前端程序员福利)语意标签快速且轻量级使用bower下载:bower install wangEditor (前提保证电脑已安装了bower)使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js使用:

1.国产富文本编辑wangEditor

可看到代码的富文本编辑器(前端程序员福利)(1)

基于javascript和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)

2.Quill

可看到代码的富文本编辑器(前端程序员福利)(3)

  • 快速且轻量级

  • 语意标签

  • 标准化 HTML

  • 支持 Chrome Firefox Safari and IE 9

  • 使用方法:

    可看到代码的富文本编辑器(前端程序员福利)(4)

    3.Bootstrap-wysiwyg

    可看到代码的富文本编辑器(前端程序员福利)(5)

    为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

    可看到代码的富文本编辑器(前端程序员福利)(6)

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

    使用:

    引入css文件:

    <link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">

    引入js文件:

    <script type="text/javascript" src="https://img.aigexing.comsrc/js/libs/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="https://img.aigexing.comsrc/js/jquery.notebook.js"></script>

    HTML代码:

    <div class="my-editor"></div>

    $(document).ready(function(){

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

    });

    4.轻量级文本编辑器Trumbowyg

    可看到代码的富文本编辑器(前端程序员福利)(7)

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

    使用方法:

    首先 添加jQuery到页面<body>位置:

    <script src="https://img.aigexing.comhttp://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

    在这之后 你必须加载Trumbowyg。

    <script src="https://img.aigexing.comjs/vendor/trumbowyg.min.js"></script>

    别忘了Trumbowyg CSS到<head> 或负载编辑您自己的风格。

    <link rel="stylesheet" href="css/vendor/trumbowyg.css">

    基础知识

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

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

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

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

    fullscreenable: false

    closable: true

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

    });

    5.Simditor 富文本编辑器

    可看到代码的富文本编辑器(前端程序员福利)(8)

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

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

    • 功能精简,加载快速

    • 输出格式化的标准 HTML

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

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

    使用方法这里就不说了,和其他编辑器大致一致。

    6.Cmd Markdown 编辑阅读器

    可看到代码的富文本编辑器(前端程序员福利)(9)

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

    实例地址 :

    https://www.zybuluo.com/mdeditor

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

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

    如果你喜欢,就请关注科技男。


    扩展阅读

    强力推荐,适合程序员学习的几个网站

    向强制广告说“不”,带你进入上网无打扰时代,干净的感觉真好

    几个插件免费访问谷歌和vip视频资源

    阿里云ESC无法使用mailer发送邮件的原因及解决方案

    猜您喜欢: