CKEditor - предотвращение вставки изображений пользователями

Question

Я хотел бы предоставить своим пользователям ограниченный редактор с использованием замечательного CKEditor.

Я пытался запретить людям добавлять изображения, поэтому заблокировал представление «Источник» и отключил кнопку «Вставить» (оставив только кнопку «Вставить как текст»).

Тем не менее, все еще возможно вставлять изображения (скопированные с веб-страницы). Есть ли способ предотвратить это?

Спасибо.

Answer 1

Я знаю, что это было давно, но если кто-то еще сталкивался с такой же проблемой.

Вы должны использовать плагин, как описано здесь , чтобы проверить все изображения, и если пользователь пытается вставить изображение, он получает предупреждение о том, что «изображения» не разрешены.

Обратите внимание, что плагин недоступен для загрузки, поэтому нам, возможно, придется создать наш собственный плагин. Это довольно просто. Нам просто нужно скопировать и вставить его код в файл plugin.js.

CKEDITOR.plugins.add( 'blockimagepaste',
{
    init : function( editor )
    {

    function replaceImgText(html) {
            var ret = html.replace( /<img[^>]*src="data:image\/(bmp|dds|gif|jpg|jpeg|png|psd|pspimage|tga|thm|tif|tiff|yuv|ai|eps|ps|svg);base64,.*?"[^>]*>/gi, function( img ){
                        alert("Direct image paste is not allowed.");
                        return '';

                     });
            return ret;
        }

        function chkImg() {
            // don't execute code if the editor is readOnly
            if (editor.readOnly)
                return;

            setTimeout( function() {
                editor.document.$.body.innerHTML = replaceImgText(editor.document.$.body.innerHTML);
            },100);
        }

        editor.on( 'contentDom', function() {
            // For Firefox
            editor.document.on('drop', chkImg);
            // For IE
            editor.document.getBody().on('drop', chkImg);
        });

        editor.on( 'paste', function(e) {

        var html = e.data.dataValue;
            if (!html)
                return;

        e.data.dataValue = replaceImgText(html);
        });

    } //Init
} );

---

Здесь объясняется еще одна опция (которая, я считаю, работает только при событии вставки, ничего не делает, когда изображение перетаскивается!)

Answer 2

Вы можете использовать событие 'вставить' , чтобы вы могли удалить все, что вам не нравится.И, конечно же, вы должны также проверить содержимое на сервере перед сохранением.

Answer 3

, что было полезно, я использовал решение Nis. но проблема в том, что если вы уроните изображение, событие вставки будет потеряно. Я сделал изменение, чтобы предотвратить эту ситуацию.

(function(){
    var pluginName = 'blockimagepaste';
    function replaceImgText(html) {
        var ret = html.replace( /<img[^>]*src="data:image\/(bmp|dds|gif|jpg|jpeg|png|psd|pspimage|tga|thm|tif|tiff|yuv|ai|eps|ps|svg);base64,.*?"[^>]*>/gi, function( img ){
            alert("Direct image paste is not allowed.");
            return '';
        });
        return ret;
    };

    function chkImg(editor) {
        // don't execute code if the editor is readOnly
        if (editor.readOnly)
            return;

        setTimeout( function() {
            editor.document.$.body.innerHTML = replaceImgText(editor.document.$.body.innerHTML);
        },100);
    };

    CKEDITOR.plugins.add( pluginName, {
        icons: pluginName,
        init : function( editor ){

            editor.on( 'contentDom', function() {
                // For Firefox
                editor.document.on('drop', function(e) {chkImg(editor);});
                // For IE
                editor.document.getBody().on('drop', function(e) {chkImg(editor);});

                editor.document.on( 'paste', function(e) {chkImg(editor);});

                // For IE
                editor.document.getBody().on('paste', function(e) {chkImg(editor);});
            });

        } //Init
    });

})();

Answer 4

Если вы хотите предотвратить это в представлении Source, просто добавьте этот код в свой плагин:

editor.on('key', function(e) {
    var html = CKEDITOR.currentInstance.getData();
    if (!html) {
        return;
    }
    CKEDITOR.currentInstance.setData(replaceImgText(html));
});