jQuery 文本编辑器插件 HtmlBox 使用

0.htmlbox下载地址:http://download.csdn.net/detail/leixiaohua1020/6376479

1.引入头文件

<script src="lib/jquery-1.8.3.min.js"></script>  <script type="text/javascript" src="lib/htmlbox/htmlbox.colors.js"></script>  <script type="text/javascript" src="lib/htmlbox/htmlbox.styles.js"></script>    <script type="text/javascript" src="lib/htmlbox/htmlbox.syntax.js"></script>  <script type="text/javascript" src="lib/htmlbox/htmlbox.undoredomanager.js"></script>    <script type="text/javascript" src="lib/htmlbox/htmlbox.min.js"></script>

2.在需要使用HtmlBox的<textarea>后面加入javascript代码:

<textarea id="htmlbox_icon_set_green" class="text_area2" cols="32" rows="3" name="content"></textarea>
<script language="Javascript" type="text/javascript">
var hb_icon_set_green = $("#htmlbox_icon_set_green").css("height","400").css("width","583").htmlbox({
toolbars:[
["cut","copy","paste","separator_dots","bold","italic","underline","strike","sub","sup","separator_dots","undo","redo","separator_dots",
"left","center","right","justify","separator_dots","ol","ul","indent","outdent","separator_dots","link","unlink","image"],
["code","removeformat","striptags","separator_dots","quote","paragraph","hr","separator_dots",
{icon:"new.gif",tooltip:"New",command:function(){hb_icon_set_green.set_text("<p></p>");}},
{icon:"open.gif",tooltip:"Open",command:function(){alert(‘Open‘)}},
{icon:"save.gif",tooltip:"Save",command:function(){alert(‘Save‘)}}
]
],
icons:"default",
skin:"green"
});
</script>

时间: 2024-10-16 19:10:44

jQuery 文本编辑器插件 HtmlBox 使用的相关文章

轻量级jQuery文本编辑器插件Froala WYSIWYG Editor

插件描述:一个轻量级的jQuery WYSIWYG文本编辑器基于HTML5技术. 跨浏览器.支持手机和视网膜屏.它是免费的使用为个人和非盈利项目. 参考网址:http://www.jq22.com/jquery-info657

转载:基于jquery的bootstrap在线文本编辑器插件Summernote

基于jquery的bootstrap在线文本编辑器插件Summernote 转载:jQ酷 » 基于jquery的bootstrap在线文本编辑器插件Summernote Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装

jQuery TE——兼容IE6的轻量级文本编辑器插件

一.jQuery TE简介 官方页面 项目Demo 官方文档 jQuery TE是一款轻量级的jQuery的网页编辑器插件,压缩后只有19.5KB,兼容性非常好的所见即所得的文本编辑器.经过测试,兼容IE6. 而且,你可以自定义它的样式,写一些css,不仅仅是textarea,你可以将多种标签变成一个编辑器,比如span,或者p等. 兼容性:IE6+.chrome.Firefox.Opera.Safari.Yandex Browser等 二.如何使用 1.引入文件 这里方便使用,引入的为CDN地

vue-quill-editor 富文本编辑器插件介绍

Iblog项目中博文的文本编辑器采用了vue-quill-editor插件,本文将简单介绍其使用方法. 引入配置 安装模块 npm install vue-quill-editor --save index.js中引入组件 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/qui

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

实例化后的summernote 是这样子的 很漂亮对吧,而我做成页面效果是这样的: 先说说实例化一个summernote 的方法把,其实也不难,jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可,参数是一个对象,属性就是这个富文本的一些样式属性,如下: 上面的属性是一些比较常用的属性,更多属性可以查看官方文档.特别注意一点的是callbacks 属性,它的作用是summernote 编辑器里面的一些功能要实现的回调方法,这里我的需求只是上传图

基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装 开源 自定义初化选项 支持快捷键 适用于各种后端程序言语 使用方法 使用html5文档 1 2 3 4 <!DOCTYPE html> <html> ..

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

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装 开源 自定义初化选项 支持快捷键 适用于各种后端程序言语 使用方法 下载地址:http://www.yyyweb.com/demo/inner-show/summern

Textarea - 百度富文本编辑器插件UEditor

UEditor各种实例演示 Ueditor 是百度推出的一款开源在线 HTML 编辑器. 主要特点: 轻量级:代码精简,加载迅速. 定制化:全新的分层理念,满足多元化的需求.采用三层架构:1. 核心层: 为命令层提供底层API,如range/selection/domUtils类.2. 命令插件层: 基于核心层开发command命令,命令之间相互独立.3. 界面层: 为命令层提供用户使用界面.满足不同层次用户的需求. 浏览器兼容兼容Mozilla, MSIE, FireFox, Maxthon,

Extjs整合CKEditor富文本编辑器插件

CKEditor插件官方下载地址: http://ckeditor.com/download/releases 我使用的版本是 ExtJS5.1.0  CKEditor4.4.8 参考文章: http://www.2cto.com/kf/201401/270462.html http://www.tuicool.com/articles/6f2mMj http://blog.csdn.net/com185272358/article/details/24814109 http://witmax.