jquery 文本编辑器插件
markitup轻量级的文本编辑器
jQuery Universal Markup Editor是一个基于jQuery的轻量级的文本编辑器,可实现非常强大的在线文本编辑器功能。可支持html、Wiki、BBScode等编辑格式,具体很强的扩展性,使用非常方便,markitup效果图如下:
使用说明
需要使用jQuery库文件和markitup库文件
使用实例
一,包含文件部分
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
- <script type="text/javascript" src="markitup/sets/html/set.js"></script>
二,HTML部分
- <textarea id="html" cols="80" rows="20">
- ...biuuu.com...
- </textarea>
三,javascrpt部分
- <script language="javascript">
- $(document).ready(function() {
- $('#html').markItUp(myHtmlSettings);
- });
- </script>
以上实例可知,使用jQuery插件markitup实现在线文本编辑器非常简单,功能非常丰富,这里只介绍了一个简单的HTML实例,大家可去markitup官方网址查看相关文档。
点我查看jQuery插件markitup的jQuery官方文档介绍
点我查看jQuery插件markitup轻量级的文本编辑器在线演示
HtmlBox文本编辑器
上期在[jQuery插件markitup轻量级的文本编辑器]介绍了一个基于jQuery的文本编辑器,这里介绍另外一个jQuery插件HtmlBox文本编辑器,提供一个textarea表单元素,即可实现一个功能强大的HTML文本编辑器,使用非常简单,效果图如下:
使用说明
需要使用jQuery库文件和HtmlBox文本编辑器库文件
使用实例
一,包含文件部分
- <script language="Javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>
- <script language="Javascript" src="htmlbox.min.js" type="text/javascript"></script>
二,HTML部分
- <textarea id='biuuu'></textarea>
三,Javascript部分
- <script language="Javascript" type="text/javascript">
- $("#biuuu").css("width",220).css("height",120).htmlbox()
- .separator("dots").button("cut").button("copy").button("paste")
- .separator("dots").button("bold").button("italic").button("underline")
- .separator("dots",2).button("undo",2).button("redo",2)
- .separator("dots",2).button("left",2).button("center",2).button("right",2).button("justify",2)
- .init();
- </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文本编辑器在线演示
使用实例
一,包含文件部分
- <script type="text/javascript" src="jquery-1.3.2.js"></script>
- <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
- <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
二,HTML部分
- <div id="editable" class="biuuu">点击弹出editable 和 WYSIWYG编辑器 </div>
三,Javascript部分
- <script type="text/javascript">
- var oFCKeditor = new FCKeditor( 'editor1') ;
- oFCKeditor.BasePath = "fckeditor/" ;
- $('.biuuu').editable(
- {
- type: 'wysiwyg',
- editor: oFCKeditor,
- onSubmit:function submitData(content){
- alert(content.current)
- },
- submit:'save'
- });
- </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 文本编辑器插件相关推荐
- jQuery 文本编辑器插件 HtmlBox 使用
jQuery 插件 HtmlBox 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.min.js&qu ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- html可视化数学公式编辑,所见即所得的jQuery数学公式编辑器插件
MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件.该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式. 使用方法 在页面中 ...
- html公式编辑器插件,所见即所得的jQuery数学公式编辑器插件
MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件.该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式. 使用方法 在页面中 ...
- 精心挑选的15款优秀 jQuery 文本特效插件和教程
今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...
- 10个神奇的jQuery文本效果插件
10个神奇的jQuery文本效果插件,真正使您的网站倍受关注! jQuery不仅涉及菜单和动画效果. 使用jQuery,您还可以创建引人入胜的文本效果,并与文本一起玩以与用户进行良好的交流. 使用此集 ...
- tui-editor(富文本编辑器插件)安装报错处理方法
tui-editor安装报错处理方法 项目中yarn或npm install时,tui-editor(富文本编辑器插件)安装报错. 显示 warning tui-editor > highlig ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...
- 14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- 14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
最新文章
- xshell导出文件用ftp到本地_使用xshell从远程服务器下载文件到本地
- js for循环给object数组赋值
- 适合python开发的linux版本,Python Linux下安装多个版本
- 迪美特TVZ8双核智能高清播放器 在电视上编程不是梦
- Linux学习之打印进程树
- leetcode - 516. 最长回文子序列
- 如何限制创建子网站时只能使用指定的模板
- 改服务器的ip地址如何修改密码,服务器ip地址修改密码
- 点击高德地图标注没法弹窗_如何在地图上标注我的店铺
- easyui datagrid 去掉外边框及行与行之间的横线标题字体
- C++11 enable_shared_from_this
- 请详细描述listview与gridview的异同点_专利和著作权有什么异同点,听听专业人士怎么说...
- 集合的概念以及集合框架的介绍
- Tomcat环境搭建以及闪退问题
- kindle中html笔记,大神教你用Kindle做笔记,事半功倍的方法来了!
- 未成年人勿进 谨以献给1980~1990出生的人(三)
- Java 身份证号码验证工具类
- Vue问题——webpack `Invalid Host/Origin header`
- MATLAB | 如何使用MATLAB绘制甘特图(gantt chart)
- Spark高级分析与机器学习笔记