CKEdit 保存

主要功能:

1,新增保存按钮

2,默认全屏

效果图

前台代码

  <!--ck文本编辑器start-->
    <script src="~/Content/Scripts/ckeditor/ckeditor.js"></script>
    <!--ck文本编辑器end-->

    <script type="text/javascript">
      
        $(function () {
            //默认全屏显示
            var oCKeditor = CKEDITOR.replace("editor1");
            oCKeditor.on('instanceReady', function (event) {
                var editor = event.editor;
                setTimeout(function () {
                    if (!editor.element) {
                        setTimeout(arguments.callee, 100);
                        return;
                    }
                    event.removeListener('instanceReady', this.callee);
                    if (editor.name == 'editor1') {
                        var command = editor.getCommand('maximize');
                        command.exec();
                        $("#cke_32").hide();
                        $("#cke_9").before($("#cke_save").show());
                    }
                }, 0);
            }, null, null, 9999);
           
        });
        //保存
        function save_agreement() {
            Loading(true, "数据处理中...");
            var html = $.trim(CKEDITOR.instances.editor1.getData());
            if (html == "") {
                return;
            }
            $.post("/CommonModule/TAgreement/Save", { html: encodeURIComponent(html) }, function (data) {
                Loading(false);
                debugger;
                if (data.result) {
                    tipDialog("保存成功", 2, 1);
                } else {
                    tipDialog("系统繁忙,请稍候再试", 2, 0);
                }
            });
        }
    </script>

</head>
<body style="margin:10px;">
    <span id="cke_save" class="cke_toolbar" aria-labelledby="cke_00_label" role="toolbar" style="display:none;">
        <span class="cke_toolbar_start"></span>
        <span class="cke_toolgroup" role="presentation">
            <a id="cke_00" class="cke_button cke_button__source  cke_button_off" title="保存" tabindex="-1"  
               onclick="save_agreement(); return false;">
                <span class="cke_button_icon cke_button__paste_icon" style="background-image:url(~/Content/Scripts/ckeditor/plugins/icons.png?t=E0PB);background-position:0 -744px;background-size:auto;">&nbsp;</span>
                <span id="cke_00_label" class="cke_button_label cke_button__source_label" aria-hidden="false">保存</span>
            </a>
        </span>
        <span class="cke_toolbar_end"></span>
    </span>

    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
        @ViewBag.Html
    </textarea>
</body>
</html>

config

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] },
        { name: 'links' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'document', groups: ['mode', 'document', 'doctools'] },
        { name: 'tools' },
        { name: 'others' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript,buttons';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.removePlugins = 'elementspath';
    config.resize_enabled = false;
};

猜你喜欢

转载自blog.csdn.net/qq873113580/article/details/82390920
今日推荐