zoukankan      html  css  js  c++  java
  • 编辑器ckeditor

    aspx页面: 
    <script type="text/javascript" charset="utf-8" src="./../Content/ckeditor/ckeditor.js"></script> 

    <style type="text/css"> 
            .editor,.editorDiv { 450px; height: 60px; overflow: auto; text-align: left; border:1px solid #ccc; padding:5px; cursor:hand;} 
            .editorFoucs { border: 1px solid red; background: #F6F0AC;} 
        </style> 

    <div id="comment" name="评论内容" class="editor" ></div> 

    <div id="editorDialog" title="质量状态数据录入">        
            <textarea id="editor" name="editor" cols="80" rows="50"></textarea> 
            <div>还可输入&nbsp;<span id="leaveId"></span> &nbsp;字&nbsp;<span id="limitId" style="display:none; color:red;">(长度超限,请控制在8000字符以内)</span></div> 
            <div class="text-notice" style="display:none;">友情提醒:您正在使用IE6,建议升级到IE8</div> 
        </div>       


    js: 
    var editor; 
    var currentEditorId = ""; //当前页面中所有的TextArea均在唯一的ckeditor对象中编辑,此值用于记录当前处于编辑状态的textarea的ID 
    var timerId = null; //定义定时器用于实时检测富文件编辑器还可输入的字数 
    var editorMaxLength = 7998; 

    $(function () { 
        initEditor(); 
    }); 


    function initEditor() { 
        $("#editorDialog").dialog( 
            { 
                show: "fast", 
                modal: true, 
                resizable: false, 
                bgiframe: false, 
                autoOpen: false, 
                550, 
                buttons: { 
                    "取消": function () { 
                        $(this).dialog("close"); 
                    }, 
                    "确定": function () { 
                        $("#" + currentEditorId).html(editor.getData()); 
                        $(this).dialog("close"); 
                    } 
                }, 
                beforeclose: function (event, ui) { 
                    if (timerId != null) { 
                        clearTimeout(timerId); 
                        timerId = null; 
                    } 

                    $("#" + currentEditorId).removeClass("editorFoucs"); 
                    if (editor) { editor.destroy(); editor = null; } 
                } 
            }); 

        //绑定textarea的点击事件,以触发显示editor的dialog 
        $(".editor").bind("click", function () { 
            currentEditorId = $(this).attr("id"); 
            showEditorDialog($(this).attr("name")); 
        }); 
    }



    function showEditorDialog(caption) { 
        $('#editorDialog').dialog('option', 'title', "" + caption); 
        $("#editorDialog").dialog("open"); 
        $("#leaveId").text(editorMaxLength); //每次加载时先显示最大可输入字 
        if (ieVersion() == 6) { 
            $("#editorDialog .text-notice").show(); 
        } 
        else { 
            $("#editorDialog .text-notice").hide(); 
        } 

        if (!editor) { 
            editor = CKEDITOR.replace("editor", 
                { 
                    480, 
                    height: 250, 
                    resize_enabled: false, 
                    toolbar: [ 
                    // ['Source'], 
                            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] //加粗     斜体,     下划线      穿过线      下标字        上标字 
                            , ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] //数字列表          实体列表            减小缩进    增大缩进 
                            , ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] //左对齐             居中对齐          右对齐          两端对齐       
                    //,'/' 
                            , ['Undo', 'Redo', '-', 'RemoveFormat'], 
                            , ['Font', 'FontSize'] //样式'Styles',       格式'Format',      字体    字体大小 
                            , ['TextColor', 'BGColor'] //文本颜色     背景颜色                
                            ] 
                }); 
        } 

        if (editor) { 
            editor.setData($("#" + currentEditorId).html()); 
            $("#" + currentEditorId).addClass("editorFoucs"); 
        } 
        if (editor && timerId == null) { 
            timerId = setInterval(function () { 

                var len = editorMaxLength - parseInt(getStringlength(editor.getData()), 10); 
                $("#leaveId").text(len); 

                if (len < 0) { 
                    $("#limitId").show(); 
                } 
                else { 
                    $("#limitId").hide(); 
                } 

            }, 800); 
        } 





    //编码,替换提交文本框中的<X为< X,以免js注入 
    function replaceText(txt) { 
        return txt.replace(/</g, "< ").replace(/<  /g, "< "); 


    解码:str.replace(/<\s+/g, "<")

  • 相关阅读:
    华为网络层协议介绍
    华为交换机基本原理
    对网络布线与数制转换粗浅认识
    对 计算机网络参考模型新认识
    我对5G的初步认识
    三层交换机单臂路由
    同网段中不同vlan间,客户机从服务器中下载数据
    Telnet远程配置
    华为模拟器里使用RIP协议跨越主类网络边界的实验现象
    7.10 IP地址的格式 以及 网段地址等
  • 原文地址:https://www.cnblogs.com/cw_volcano/p/2173530.html
Copyright © 2011-2022 走看看