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

转载于:https://www.cnblogs.com/hdjjun/archive/2010/02/23/1671973.html

jquery 文本编辑器插件相关推荐

  1. jQuery 文本编辑器插件 HtmlBox 使用

    jQuery 插件 HtmlBox 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.min.js&qu ...

  2. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  3. html可视化数学公式编辑,所见即所得的jQuery数学公式编辑器插件

    MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件.该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式. 使用方法 在页面中 ...

  4. html公式编辑器插件,所见即所得的jQuery数学公式编辑器插件

    MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件.该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式. 使用方法 在页面中 ...

  5. 精心挑选的15款优秀 jQuery 文本特效插件和教程

    今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...

  6. 10个神奇的jQuery文本效果插件

    10个神奇的jQuery文本效果插件,真正使您的网站倍受关注! jQuery不仅涉及菜单和动画效果. 使用jQuery,您还可以创建引人入胜的文本效果,并与文本一起玩以与用户进行良好的交流. 使用此集 ...

  7. tui-editor(富文本编辑器插件)安装报错处理方法

    tui-editor安装报错处理方法 项目中yarn或npm install时,tui-editor(富文本编辑器插件)安装报错. 显示 warning tui-editor > highlig ...

  8. 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇

    首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...

  9. 14款前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

  10. 14款web前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

最新文章

  1. xshell导出文件用ftp到本地_使用xshell从远程服务器下载文件到本地
  2. js for循环给object数组赋值
  3. 适合python开发的linux版本,Python Linux下安装多个版本
  4. 迪美特TVZ8双核智能高清播放器 在电视上编程不是梦
  5. Linux学习之打印进程树
  6. leetcode - 516. 最长回文子序列
  7. 如何限制创建子网站时只能使用指定的模板
  8. 改服务器的ip地址如何修改密码,服务器ip地址修改密码
  9. 点击高德地图标注没法弹窗_如何在地图上标注我的店铺
  10. easyui datagrid 去掉外边框及行与行之间的横线标题字体
  11. C++11 enable_shared_from_this
  12. 请详细描述listview与gridview的异同点_专利和著作权有什么异同点,听听专业人士怎么说...
  13. 集合的概念以及集合框架的介绍
  14. Tomcat环境搭建以及闪退问题
  15. kindle中html笔记,大神教你用Kindle做笔记,事半功倍的方法来了!
  16. 未成年人勿进 谨以献给1980~1990出生的人(三)
  17. Java 身份证号码验证工具类
  18. Vue问题——webpack `Invalid Host/Origin header`
  19. MATLAB | 如何使用MATLAB绘制甘特图(gantt chart)
  20. Spark高级分析与机器学习笔记

热门文章

  1. pandasSeries模块
  2. Servlet中将JavaBean对象传递到JSP页
  3. sql server 存储过程_pgRouting教程七:使用SQL存储过程
  4. 003_ElasticSearch详解与优化设计
  5. PHPCMS怎么创建单选按钮、复选框,并在模板里怎么接收和调用。
  6. docfx daylybuild
  7. 无法进入recovery模式?fastboot来拯救
  8. linux下文本处理
  9. java程序中验证框架四规则(初级知识)
  10. C#设计模式系列:抽象工厂模式(AbstractFactory)