仿博客园编辑器的插入代码 代码高亮功能

 代码下载地址：http://download.csdn.net/detail/dfg727/7616305

 

1. a.配置tinymce，增加一个insert code按钮
    b.处理显示页面中展开收缩的高亮部分事件

var tinymce_config = function (selector) {
    tinymce.init({
        selector: selector,
        theme: "modern",
        menubar: false,
        plugins: [
            "preview",
            "insertcode code",
            "emoticons textcolor colorpicker "
        ],
        external_plugins: {
            //"insertcode": "plugins/insertcode/plugin.min.js"
        },
        content_css: "CodeHighlighter/CodeHighlighter.css",
        toolbar: "undo redo | bold italic | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | forecolor backcolor emoticons | insertcode code preview",

        setup: function (editor) {
            editor.addButton('insertcode', {
                image: "/CodeHighlighter/images/insertCode.gif",
                onclick: function () {
                    showDialog(editor);
                }
            });
        }
    });

    function showDialog(editor) {
        var win = editor.windowManager.open({
            title: "Insert code",
            //file: '/InsertCode.aspx',
            width: parseInt(editor.getParam("plugin_preview_width", "550"), 10),
            height: parseInt(editor.getParam("plugin_preview_height", "320"), 10),
            html: '<iframe >,
            buttons: {
                text: 'Submit',
                onclick: function () {
                    var iframe = $('#insercode_iframe')[0].contentWindow.document;
                    var that = this;
                    var codeText = $("#CodeTextBox", iframe).val().trim();
                    if (codeText == "") {
                        alert("please input the codes");
                        return false;
                    }
                    $.ajax({
                        type: "POST",
                        url: "Highligh.aspx",
                        data: {
                            "Language": $("#LanguageDropDownList", iframe).val(),
                            "IsCollapse": $("#cbOutliningEnabled", iframe)[0].checked,
                            "IsShowLineNumber": $("#cbLineNumberMarginVisible", iframe)[0].checked,
                            "CodeText": $("#CodeTextBox", iframe).val(),
                            "CodeTitle": $("#CodeTitle", iframe).val()
                        },
                        //data: "Id=5&Name=lia5",
                        //dataType: "json",
                        success: function (data) {
                            editor.focus();

                            editor.execCommand('mceInsertContent', false, data);

                            that.parent().parent().close();
                        },
                        error: function () {
                            alert("have error, please contact admin.");
                        }
                    });

                }
            }
        });
    }
}

//显示页面中展开收缩高亮部分
var code_highlight = function () {
    var collapse = function () {
        $(".code_img_closed, .likecs_code_collapse").click(function () {
            $(this).hide()
                .siblings(".code_img_closed").hide().end()
                .siblings(".likecs_code_collapse").hide().end()
                .siblings(".code_img_opened").show().end()
                .siblings("div[id^=likecs_code_open_]").show().end();
        });
        $(".code_img_opened").click(function () {
            $(this).hide()
                .siblings(".code_img_closed").show().end()
                .siblings(".likecs_code_collapse").show().end()
                .siblings(".code_img_opened").hide().end()
                .siblings(".likecs_code_hide").hide().end();
        });
    };

    var copy = function () {
        $(".likecs_code_copy>img").click(function () {
            var $code_open = $(this).parents("div[id^='likecs_code_open_']");
            $code_open.hide()
                .siblings("div[id^='likecs_code_copy_']").show().end()
                .siblings(".code_img_opened").hide();
        })
    };

    return {
        init: function () {
            collapse();
            copy();
        }
    }
}();

View Code