Home >php教程 >php手册 >jquery编辑器插件tinyMCE介绍

jquery编辑器插件tinyMCE介绍

WBOY
WBOYOriginal
2016-06-01 09:46:481717browse

修改简化文件大小后的案例下载:下载文件到本地 也可以到官方网站下载最新的基于jquery的.

1 html

<code class="language-html"><textarea id="txtcontent" runat="server" name="elm1″ rows=" cols="80″ style=" width:80></textarea></code>

2 js引用

首先引用tiny_mce.js和jquery-1.4.2.min.js

tinyMCE的调用:

<code class="language-html"><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></code>

参数详解:

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代码如下:

<code class="language-javascript">tinyMCE.execCommand(‘mceInsertContent’,false,"<p><img src="%5C%22../images/house.jpg%5C%22" alt='\"\"'    style="max-width:90%"588\"' height='\"419\"'></p>");</code>

通过js获取输入框内容,代码如下:

<code class="language-javascript">tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML</code>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn