tinyMCE,编辑器插件修改简化文件大小后的案例下载:下载文件到本地 也可以到官方网站下载最新的基于jquery的 http://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-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 tinyMCE,编辑器插件
|