jquery编写器软件tinyMCE的应用方式

日期:2020-11-02 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

改动简化文档尺寸后的实例免费下载:免费下载文档到当地 还可以到官网免费下载全新的根据jquery的 https://www.jb51.net/codes/44180.html

1 html

<textarea id="txtcontent" runat="server" name="elm1″ rows="15″ cols="80″ style="width:80%"></textarea>

2 js引入

最先引入tiny_mce.js和jquery⑴.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:第1行的作用按钮显示信息,1下以此类推theme_advanced_buttons2这些
3 拓展
向键入框中根据js追加1个照片并显示信息,js编码以下:
tinyMCE.execCommand(‘mceInsertContent’,false,"<p><img src=\"../images/house.jpg\" alt=\"\" width=\"588\" height=\"419\" /></p>");
根据js获得键入框內容,编码以下:
tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML