建站动态:乐数码共分享文章教程6 篇,网站模板0 套,网站源码0份!你还可以: 免费投稿

jquery编辑器插件tinyMCE的使用方法

综合其他     次浏览 0看法
修改简化文件大小后的案例下载:下载文件到本地 也可以到官方网站下载最新的基于jquery的 http://pan.baidu.com/s/1jGzovx8

第一步  html部分
  1. <textarea id="txtcontent" runat="server" name="elm1″ rows="15″ cols="80″ style="width:80%"></textarea> 
第二步 js引用

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

tinyMCE的调用:
  1. <script type="text/javascript"
  2. tinyMCE.init({ 
  3. // 通用参数配置 
  4. mode : "textareas"
  5. theme : "advanced"
  6. plugins :"pagebreak,style,layer,table,save"
  7. // 主题参数配置 
  8. theme_advanced_buttons1 :",bold,italic,underline,strikethrough"
  9. theme_advanced_buttons2 : ""
  10. theme_advanced_toolbar_location : "top"
  11. theme_advanced_toolbar_align : "left"
  12. theme_advanced_statusbar_location : "bottom"
  13. theme_advanced_resizing : true
  14. // 在此处可以更换您自己的样式 
  15. content_css : "css/word.css"
  16. external_link_list_url : "lists/link_list.js"
  17. // Replace values for the template plugin 
  18. template_replace_values : { 
  19. username : "Some User"
  20. staffid : "991234″ 
  21. }); 
  22. </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等等

    扩展部分
向输入框中通过js追加一个图片并显示,js代码如下:
  1. tinyMCE.execCommand(‘mceInsertContent’,false,"<p><img src=\"../images/house.jpg\" alt=\"\" width=\"588\" height=\"419\" /></p>"); 

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

  1. tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML 

 

转载请注明:乐数码_提供虚拟主机、云主机、域名注册服务,关注网站设计、网页设计、建站教程及建站资源 » jquery编辑器插件tinyMCE的使用方法