jquery 文本编辑器插件

markitup轻量级的文本编辑器

jQuery Universal Markup Editor是一个基于jQuery的轻量级的文本编辑器，可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式，具体很强的扩展性，使用非常方便，markitup效果图如下：

使用说明
需要使用jQuery库文件和markitup库文件
使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
3. <script type="text/javascript" src="markitup/sets/html/set.js"></script>

二，HTML部分

1. <textarea id="html" cols="80" rows="20">
2. ...biuuu.com...
3. </textarea>

三，javascrpt部分

1. <script language="javascript">
2. $(document).ready(function()    {
3. $('#html').markItUp(myHtmlSettings);
4. });
5. </script>

以上实例可知，使用jQuery插件markitup实现在线文本编辑器非常简单，功能非常丰富，这里只介绍了一个简单的HTML实例，大家可去markitup官方网址查看相关文档。

点我查看jQuery插件markitup的jQuery官方文档介绍
点我查看jQuery插件markitup轻量级的文本编辑器在线演示

 

 

 

HtmlBox文本编辑器

 

上期在[jQuery插件markitup轻量级的文本编辑器]介绍了一个基于jQuery的文本编辑器，这里介绍另外一个jQuery插件HtmlBox文本编辑器，提供一个textarea表单元素，即可实现一个功能强大的HTML文本编辑器，使用非常简单，效果图如下：

使用说明
需要使用jQuery库文件和HtmlBox文本编辑器库文件

使用实例
一，包含文件部分

1. <script language="Javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>
2. <script language="Javascript" src="htmlbox.min.js" type="text/javascript"></script>

二，HTML部分

1. <textarea id='biuuu'></textarea>

三，Javascript部分

1. <script language="Javascript" type="text/javascript">
2. $("#biuuu").css("width",220).css("height",120).htmlbox()
3. .separator("dots").button("cut").button("copy").button("paste")
4. .separator("dots").button("bold").button("italic").button("underline")
5. .separator("dots",2).button("undo",2).button("redo",2)
6. .separator("dots",2).button("left",2).button("center",2).button("right",2).button("justify",2)
7. .init();
8. </script>

代码分析：
width表示宽度
height表示高度
$("#biuuu").css("width",220).css("height",120).htmlbox()表示生成一个宽度为220高度为120的HtmlBox文本编辑器。然后增加一些使用功能，上面实例定义了几个功能，如剪切cut、复制copy、粘贴paste、加粗bold等。

这只是一个非常小的使用实例，其中只包含了HtmlBox文本编辑器部分功能，这些都可以自定义，具体大家可以查看完整的演示代码，使用非常简单。

点我下载jQuery插件HtmlBox文本编辑器

 

 

可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器

 

 

很多的PHP开发者应该对FCKeditor文本编辑器非常熟悉，因为大部分的国产PHP教材书中在介绍CMS制作时都会推荐使用这个文本编辑器，另外一个就是WYSIWYG编辑器，，这里介绍一个可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器，IPWEditor插件可实现少量的代码改动就能实现这二个编缉器的结合，效果图如下：

使用说明
需要使用jQuery库文件和editable.wysiwyg库文件
可结合fckeditor组件

必优推荐级别：★★★

点我查看IPWEditor文本编辑器在线演示

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
3. <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

二，HTML部分

1. <div id="editable" class="biuuu">点击弹出editable 和 WYSIWYG编辑器 </div>

三，Javascript部分

1. <script type="text/javascript">
2. var oFCKeditor = new FCKeditor( 'editor1') ;
3. oFCKeditor.BasePath = "fckeditor/" ;
4. $('.biuuu').editable(
5. {
6. type: 'wysiwyg',
7. editor: oFCKeditor,
8. onSubmit:function submitData(content){
9. alert(content.current)
10. },
11. submit:'save'
12. });
13. </script>

如上实例，实现如效果图的文本编辑器，实现当点击类名为biuuu的DIV弹出一个文本编辑器，具体说明如下：

一，初始化FCKeditor对象
var oFCKeditor = new FCKeditor( 'editor1') ;

二，设置FCKeditor路径
oFCKeditor.BasePath = "fckeditor/" ;

三，加载编辑器部分
$('.biuuu').editable({});

具体参数部分比较简单，分别是type类型，editor编辑器，onSubmit提交回调事件，submit提交元素名称，具体可查看editable的JS文件配置部分。

这个可结合FCKeditor与WYSIWYG的jQuery插件IPWEditor文本编辑器，非常有意思，创新的想法是需要的，这样才能有更多灵感和火化。

 

 

TrackBack：http://www.biuuu.com/tag-jQuery%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8.html