jquery编辑插件tinyMCE的使用方法
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,java又能非常容易的进行扩展和二次开发。
修改简化文件大小后的案例下载:下载文件到本地
1 html
<textarea id=”txtcontent” runat=”server” name=”elm1″ rows=”15″ cols=”80″ style=”width:80%”></textarea>
2 js引用
首先引用tiny_mce.js和jquery-1.4.2.min.js
tinyMCE的调用:
<script type=”text/javascript”>
tinyMCE.init({
// 通用参数配置
mode : “textareas”,theme : “advanced”,
plugins :”pagebreak,style,layer,table,save”,
// 主题参数配置
theme_advanced_buttons1 :”,bold,italic,underline,strikethrough”,
theme_advanced_buttons2 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,// 在此处可以更换您自己的样式
content_css : “css/word.css”,external_link_list_url : “lists/link_list.js”,
// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
</script>
参数详解:
mode:textareas或者exact
elements:配合mode中exact使用,它的值为html中要使用的textaear的id或name名称
theme:所使用的样式
skin:找到相应的skin目录下样式
skin_variant:skin目录下的文件css选择,如:skin_variant : “black”表示:skins\o2k7\ui_black.css
plugins:plugins文件夹下插件的选择使用
theme_advanced_buttons1:第一行的功能按钮显示,一下以此类推theme_advanced_buttons2等等
3 扩展
向输入框中通过js追加一个图片并显示,js代码如下:
tinyMCE.execCommand(‘mceInsertContent’,false,”<p><img src=\”../images/house.jpg\” alt=\”\” width=\”588\” height=\”419\” /></p>”);
通过js获取输入框内容,代码如下:
tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML
jquery编辑插件tinyMCE的使用方法的更多相关文章
- jQuery开发插件的两个方法 js 深浅拷贝
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...
- 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- jQuery form插件的使用--使用 fieldValue 方法校验表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- Jquery开发插件的方法
Jquery未开发插件提供了两个方法: (1)Jquery.extend(object) -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
随机推荐
- 使用 istreambuf_iterator 读取文件内容,赋值给 std::string
需要一个一个字符输入时考虑使用istreambuf_iterator 假设我们要把一个文本文件拷贝到一个字符串对象中.似乎可以用一种很有道理的方法完成: ifstream inputFile(&quo ...
- .Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明
Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...
- RM报表,点击保存,为何每次都显示 另存为的对话框?
function TRMDesignerForm.FileSave: Boolean; var lSaved: Boolean; lFileName: string; begin Result := ...
- windows 环境下python 安装 pypcap 并用pyinstaller打包到exe,解决DLL 加载失败。
安装 PYQT5 pypcap 环境: windows10_x64 python3.6.3 pycharm2017.2.4 备注: 需要安装 Visual C++ Build Tools 2015 可 ...
- 关于如何使用cg中的discard/clip
Pass { ZTest Always Cull Off ZWrite Off Fog { Mode off } Blend Off CGPROGRAM #pragma vertex vert_img ...
- C++设计模式之解释器模式
2013年07月06日 19:43:00 阅读数:8853 概述: 未来机器智能化已然成为趋势,现在手机都能听懂英语和普通话,那我大中华几万种方言的被智能化也许也是趋势,我们的方言虽然和普通话相似,但 ...
- sonarqube 代码检查
再好的程序员也会出bug,所以代码检查很有必要.今天就出一个简单的检查工具代替人工检查. 参考: http://www.cnblogs.com/qiaoyeye/p/5249786.html 环境及版 ...
- mysql 试图
关系型数据库中的数据是由一张一张的二维关系表所组成,简单的单表查询只需要遍历一个表,而复杂的多表查询需要将多个表连接起来进行查询任务.对于复杂的查询事件,每次查询都需要编写MySQL代码效率低下.为了 ...
- HandBrake 开源视频转码器、编码转换器、格式转换器
HandBrake 开源视频转码器.编码转换器.格式转换器 点击下图进入官网下载页面:https://handbrake.fr/downloads.php macOS 下可能会阻止安装! 其实也不是安 ...
- 关于CGI和FastCGI的理解
在搭建 LAMP/LNMP 服务器时,会经常遇到 PHP-FPM.FastCGI和CGI 这几个概念.如果对它们一知半解,很难搭建出高性能的服务器. 0.CGI的引入 在网站的整体架构中,Web Se ...