django - 如何在ckeditor中配置简单的链接和图像附加？

Question

我正在使用 django-ckeditor，但链接和图像存在一些问题。

关于链接:



在此界面中，您可以看到最终用户无法使用它，因为它太复杂并且可能导致错误和安全问题，如按钮 Browse Server字面上允许用户浏览上传的内容。我想要的是一些非常简单的东西:只是一个自动附加 http 的输入文本(如果不是由用户输入)并在新窗口中打开链接，即目标 _blank .

我尝试使用以下代码编辑 config.js。这已经删除了 Upload和 Advanced标签，从 Info 中删除了不必要的小部件标签并设定目标 _blank默认情况下。但是Target选项卡仍然存在，用户可以更改它，因为我显然无法删除此选项卡，否则默认目标会被忽略，我一直坚持这个。所以，如何将目标设置为 _blank并删除 Target标签也是？ 有没有办法隐藏这个选项卡，但不能删除它？

CKEDITOR.on('dialogDefinition', function(ev) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is from the dialog we're
    // interested in (the 'link' dialog).
    if (dialogName == 'link') {
        // Remove the 'Target', 'Upload' and 'Advanced' tabs from the 'Link' dialog.
//        dialogDefinition.removeContents('target');
        dialogDefinition.removeContents('upload');
        dialogDefinition.removeContents('advanced');

        // Get a reference to the 'Link Info' tab.
        var infoTab = dialogDefinition.getContents('info');

        // Remove unnecessary widgets from the 'Link Info' tab.         
        infoTab.remove('linkType');
        infoTab.remove('protocol');
        infoTab.remove('browse');

        // Get a reference to the "Target" tab.
        var targetTab = dialogDefinition.getContents('target');
        // Set the default value for the URL field.
        var targetField = targetTab.get('linkTargetType');
        targetField['default'] = '_blank';
    }

});

关于图片:

有一个非常相似的情况:几个选项卡的选项太多。我需要的是像在 Stackoverflow 中附加图像的选项一样简单的东西。 是否有任何免费插件可以让我通过链接添加图像，并使用 ckeditor 从计算机(带有预可视化)上传图像？

谢谢!

Answer 1

最后，我得到了简单的对话框:包括链接、从链接附加图像或从计算机上传以及以简单的方式包含 Youtube 视频。为此，我编辑了名为 config.js 的配置文件。对于我的 CKeditor 4.1.2 版本，它看起来像这样:

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

    // Comment the following line in DEBUG mode:
    config.removePlugins = 'devtools';

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

    // Make dialogs simpler.
    config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';
    config.linkShowTargetTab = false;

    // In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter)
    // to make Youtube plugin work:
    config.allowedContent = true;
};

CKEDITOR.on('dialogDefinition', function(ev) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is from the dialog we're
    // interested in (the 'link' dialog).
    if (dialogName == 'link') {
//        Remove the 'Upload' and 'Advanced' tabs from the 'Link' dialog.
//        dialogDefinition.removeContents('upload');
//        dialogDefinition.removeContents('advanced');

        // Get a reference to the 'Link Info' tab.
        var infoTab = dialogDefinition.getContents('info');
        // Remove unnecessary widgets from the 'Link Info' tab.
        infoTab.remove('linkType');
        infoTab.remove('protocol');
        infoTab.remove('browse');

        // Get a reference to the "Target" tab and set default to '_blank'
        var targetTab = dialogDefinition.getContents('target');
        var targetField = targetTab.get('linkTargetType');
        targetField['default'] = '_blank';

    } else if (dialogName == 'image') {
//        Remove the 'Link' and 'Advanced' tabs from the 'Image' dialog.
//        dialogDefinition.removeContents('Link');
//        dialogDefinition.removeContents('advanced');

        // Get a reference to the 'Image Info' tab.
        var infoTab = dialogDefinition.getContents('info');
        // Remove unnecessary widgets/elements from the 'Image Info' tab.
        infoTab.remove('browse');
        infoTab.remove('txtHSpace');
        infoTab.remove('txtVSpace');
        infoTab.remove('txtBorder');
        // infoTab.remove('cmbAlign');

    }
});

为此，我阅读了大量文档，但启发我的最佳页面如下:

http://ckeditor.com/ckeditor_4.1rc/samples/plugins/toolbar/toolbar.html

http://ckeditor.com/forums/Support/Removing-Tabs-Image-Dialog

http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items

http://khaledben.wordpress.com/2012/04/28/customize-ckeditor-dialog/

http://www.question2answer.org/qa/13255/simple-ckeditor-how-to-modify-it-to-be-simple-solution

我希望这可以帮助其他有同样问题的人。干杯!