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


    jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,java又能非常容易的进行扩展和二次开发。
    修改简化文件大小后的案例下载:下载文件到本地
    1 html

    <textarea id=”txtcontent” runat=”server” name=”elm1″ rows=”15″ cols=”80″ style=”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”表示:skinso2k7ui_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

  • 相关阅读:
    os
    虚拟站点配置
    21. Merge Two Sorted Lists
    38. Count and Say
    算法分类的书写模板
    Vue
    问题集、知识点
    [Linux] Linux命令
    回调函数在小程序中的实际应用
    小程序app.onLaunch中获取用户信息,index.onLoad初次载入时取不到值的问题
  • 原文地址:https://www.cnblogs.com/mili3/p/3255235.html
Copyright © 2020-2023  润新知