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的使用方法的更多相关文章

  1. jQuery开发插件的两个方法 js 深浅拷贝

    1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...

  2. 网站开发常用jQuery插件总结(八)标签编辑插件Tagit

    一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...

  3. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  4. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  5. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  6. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  8. Jquery开发插件的方法

    Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...

  9. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

随机推荐

  1. spring cloud 学习(一)初学SpringCloud

    初学SpringCloud 前言 在SpringBoot的坑还没填完的情况下,我又迫不及待地开新坑了.主要是寒假即将结束了,到时又得忙于各种各样的事情……留个坑给自己应该就会惦记着它,再慢慢地补上…… ...

  2. httpclient 连接路由

    http路由 httpclient能够直接或通过路由建立连接到目标主机,这会涉及多个中间连接,也被称为跳. Httpclient区分路由和普通连接,通道和分层. 通道连接到目标主机的多个中间代理的使用 ...

  3. Flask初级(三)flash使用模板

    Project name :Flask_Plan 模板文件夹未在创建项目时设定的是templates 我们不能总是用return 每个页面去写html,老长了. flask提供了模板引擎,其实也是别人 ...

  4. MyEclipse移动开发教程:迁移HTML5移动项目到PhoneGap(二)

    MyEclipse开年钜惠 在线购买低至75折!立即开抢>> [MyEclipse最新版下载] 二.将文件从HTML5项目复制到PhoneGap项目中 1. 在HTML5 app项目的ww ...

  5. 打开WORD文档出错提示

    打开WORD文档出错提示: Microsoft Office Word 遇到问题需要关闭.我们对此引起的不便表示抱歉. 您正在处理的信息有可能丢失.Microsoft Office Word 可以尝试 ...

  6. js 常用事件

    onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的. 如:点击验证码时进 ...

  7. Spring学习(一)--概述

    Spring是什么? 是一个框架,是为了解决企业应用开发的复杂性而创建的框架 是一个框架,是一个轻量级的控制反转和面向切面的容器框架 从大小与开销两方面而言Spring都是轻量的 通过控制反转(IoC ...

  8. DelaunayTriangulation_VoronoiDiagram_using_OpenCV的实现

    前言 最近project中有关于delaunay的实现问题,查找资料,看到learnopencv这个网站,有很多peoject的实现,本文主要是实现Delaunay Triangulation and ...

  9. HDU1070:Milk

    Milk Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. java1.8操作日期

    java1.8获取年份: int year = Calendar.getInstance().get(Calendar.YEAR); StringBuilder code = new StringBu ...