Вставьте пользовательский тег в CKeditor - PullRequest
Новая
       29

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

0 голосов
/ 30 ноября 2018

В моем 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());
                }
            });
        });
    },

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

1 Ответ

0 голосов
/ 30 ноября 2018

Чтобы использовать пользовательские встроенные элементы, вам необходимо изменить объект 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(*)[*]{*}'
});

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

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

...