Вставьте пользовательский тег в CKeditor

Question

Вставьте пользовательский тег в CKeditor

1

В моем Ckeditor (версия 4.8) у меня есть пользовательский тег citation например <citation>page 2</citation>. Моя проблема заключается в том, что при копировании я вставляю содержимое, например, <citation>page 2</citation>, To be or not to be<citation>page 2</citation>. Мой пользовательский тег теряется, и результатом будет " To be or not to bepage 2 вместо " To be or not to be<citation>page 2</citation>.

В моем конфиге я разрешаю свой пользовательский тег:

config = {extraAllowedContent: 'citation'}

Мой текущий обходной путь следующий:

init: function(editor){
        editor.on('contentDom',function()
        {
            editor.on('paste', function(e)
            {
                var focusManager = new CKEDITOR.focusManager(editor);
                if(focusManager.hasFocus)
                {
                    e.data.dataValue = "<span class='paste'>" + e.data.dataValue + "</span>" //wraps it in a utils tag
                }
            });

            editor.on('afterPaste', function(e)
            {
                var focusManager = new CKEDITOR.focusManager(editor); //unwraps it again
                if(focusManager.hasFocus)
                {
                    var $content = $("<div/>").html(editor.getData());
                    $content.find("span.paste").children().unwrap();
                    editor.setData($content.html());
                }
            });
        });
    },

Перед вставкой он оборачивает содержимое, которое нужно вставить, и удаляет его после вставки снова. Я знаю, что есть похожий вопрос о моей проблеме. Однако мне интересно, что будет правильным способом. Кто-нибудь может мне помочь? Благодарю.

wprogLK 30 нояб. 2018, в 11:35

Источник

Теги:

javascript

ckeditor

copy-paste

ckeditor4.x

paste

1 ответ

Ещё вопросы

j.swiderski · Answer 1 · 2018-11-30T11-35-00.000Z

Чтобы использовать пользовательские встроенные элементы, вам необходимо изменить DTD-объект, как показано ниже:

//<customtag><span style="background-color:blue;">test</span></customtag>
CKEDITOR.dtd.customtag = { '#' : 1, 'span' : 1, 'img' : 1 }; // Only text, spans and images are allowed as content of custom tag
CKEDITOR.dtd.$inline.customtag = 1;// Custom tag is inline
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
var editor = CKEDITOR.replace( 'editor1', {
    extraAllowedContent : 'customtag(*)[*]{*}'
});

Если вы хотите использовать теги на уровне блоков, вам необходимо изменить исходный код CKEditor DTD и создать собственный экземпляр редактора. Подробнее об этом можно прочитать в этом потоке: ckeditor, как разрешить.insertHtml("<customTag myAttr = 'значение"> </customTag> ").

ПРИМЕЧАНИЕ. Я лично не рекомендую слишком часто входить в пользовательские теги. Помните, что браузеры в целом не знают этих тегов, и чем больше причудливых вещей вам нужно сделать, тем глубже вы должны идти, и тем лучше шанс, что вы попадете в какую-то особенность браузера. С блочными метками их внутренний контент может быть удален из тега. В случае встроенных тегов вы можете получить неожиданную дополнительную перенос текста при использовании пустых пользовательских тегов, таких как <variable data-custom-attr="text value"/> (вы должны использовать <variable data-custom-attr="text value"></variable>).