• 欢迎访问往前方博客,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入往前方 QQ群
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/www.wangqianfang.com
  • 新版往前方影院 原藏藏影院重新开启http://movie.wangqianfang.com/欢迎围观
  • 分享IT江湖那些趣事,那些牛人传说,那些稀奇古怪的网站,那些爱不释手的应用软件!如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏往前方吧
  • 往前方的推荐:每日更新.帮助广大网友各位小伙伴买到更有性价比商品往前方力荐!http://mai.ziyuandi.cn 戳这里跟着资源帝挖白菜,从此快递收不停!

精品软件推荐:免费好用的5款富文本编辑器

资源推荐 admin 1247次浏览 已收录 0个评论 扫描二维码

精品软件推荐:免费好用的5款富文本编辑器

Web 应用经常会用到富文本编辑器功能,当然如果是 JavaScript 大牛,重复造轮子也是可以的,如果想省时省力,可以关注下下面5款免费的文本编辑器框架。
widgEditor
有时需要一款极简的文本编辑器,那么 widgEditor 再合适不过(只有33.4 KB),简洁实用。

使用简便:

1<textarea id="”widgEditor”">Some Sample Text</textarea>

需要引入相应的 CSS 和 JS:

1<link href="”widgEditor/css/widgEditor.css”" rel="”stylesheet”" /><script type="text/javascript"src="”widgEditor/scripts/widgEditor.js”"></script>

精品软件推荐:免费好用的5款富文本编辑器

点击放大镜按钮,支持 HTML 编码。
主要优点:朴素,代码小,易用;
缺点:功能不足,不易扩展,缺乏第三方支持。

实例:The Man in Blue – widgEditor

下载:widgEditor 1.0.1

文档:下载包中有

TinyMCE
TinyMCE 易于使用:

1<textarea id="”TypeHere”">Type some text here.</textarea> <textareaid="”NoTinyMCE”">This is a text area.</textarea><script type="text/javascript"src="”http://tinymce.cachefly.net/4.0/tinymce.min.js”"></script>
2<script type="”application/x-javascript”">// <![CDATA[
3tinymce.init({selector:’#TypeHere’});
4// ]]></script>

tinymce.init() 也可以用 CSS3 选择器。

精品软件推荐:免费好用的5款富文本编辑器

优点:独立,易用;缺点:代码量大

实例:Tiny MCE Full-Featured Example
下载:Tiny MCE 4.0.x
文档:Tiny MCE Wiki Documentation

MarkItUp
基于 jQuery ,MarkItUp 是 jQuery 插件。可以配置 MarkItUp ,把它当成标签标记器。

使用:

1<textarea cols="”80″" rows="”20″">Some Sample Text</textarea>
2
3<script type="text/javascript" src="”http://code.jquery.com/jquery-1.8.0.min.js”"></script><scripttype="text/javascript" src="”MarkItUp/markitup/jquery.markitup.js”"></script>
4<script type="text/javascript" src="”MarkItUp/markitup/sets/default/set.js”"></script>  <linkhref="”MarkItUp/markitup/skins/simple/style.css”" rel="”stylesheet”" />     <linkhref="”MarkItUp/markitup/sets/default/style.css”" rel="”stylesheet”" /><scripttype="text/javascript">// <![CDATA[
5$(document).ready(function() {
6$(‘#markItUp’).markItUp(mySettings);
7});
8// ]]></script>

mySettings 参数用于初始化设置。

精品软件推荐:免费好用的5款富文本编辑器

MarkItUp 非常灵活,轻量,下载页有许多扩展,插件,皮肤,解析器和其它功能,MarkItUp 学习曲线比较陡峭,特别是把一些功能组合使用的时候。

实例:markItUP! in Action
下载:markItUp! Download
文档:markItUp! Documentation 1.1

NicEdit
NicEdit 简便快捷。

别的编辑器都用 <textarea> 标签,NicEdit 用其它标签也可以,比如 <div>

1<textarea id="”NicEdit”" cols="”80″" rows="”5″">Some Sample Text</textarea>
2<textarea id="”NotNicEdit”" cols="”80″" rows="”5″">Some Sample Text</textarea></pre>
3<div id="”NicEdit2″">Some Sample Text
4<pre>
5<script type="text/javascript" src="”http://js.nicedit.com/nicEdit-latest.js”"></script><scripttype="text/javascript">// <![CDATA[
6bkLib.onDomLoaded(function()
7{
8new nicEditor().panelInstance(‘NicEdit’);
9new nicEditor().panelInstance(‘NicEdit2′);
10});
11// ]]></script>

精品软件推荐:免费好用的5款富文本编辑器

此款编辑器包含很全的格式化功能,支持各种元素类型。

实例:NicEdit Demos 1-5
下载:NicEdit Components
文档:NicEdit Wiki

YUI 2: Rich Text Editor
YUI2 富文本编辑器非常极简。

1<textarea id="”RichTextEdit”" cols="”100″" rows="”5″">Some Sample Text</textarea>
2
3    <link href="”http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css”" rel="”stylesheet”"/>     <link href="”http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/" rel="”stylesheet”" />
4
5<script type="text/javascript"src="”http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js”">// <![CDATA[
6
7// ]]></script>
8<script type="text/javascript"src="”http://yui.yahooapis.com/2.9.0/build/element/element-min.js”"></script><scripttype="text/javascript"src="”http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js”">// <![CDATA[
9
10// ]]></script>
11<script type="text/javascript"src="”http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js”"></script><scripttype="text/javascript">// <![CDATA[
12(function()
13{
14new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render();
15})();
16// ]]></script>

精品软件推荐:免费好用的5款富文本编辑器

实例:YUI 2 Rich Text Editor: Examples
下载:YUI 2.9 zip
文档:Yahoo! UI Library


往前方 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明精品软件推荐:免费好用的5款富文本编辑器

历史上的今天:

喜欢 (0)
[fmfbth@qq.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址