Вложенные элементы span CKEditor 4 удаляются после инициализации встроенного редактирования

Question

Вложенные элементы span CKEditor 4 удаляются после инициализации встроенного редактирования

0

У меня есть div, который является contenteditable = true. Когда я дважды щелкните по нему, я запускаю этот код встроенного редактирования в CKEditor, и он успешно отображает панели инструментов CKEditor

 $("#content_id").attr("contenteditable", true);
 ckeditor_instance = CKEDITOR.inline( content_id );

Теперь у меня есть плагин LineHeight и LetterSpacing, который выглядит как выпадающий список на панели инструментов CKEditor (плагин, сделанный другими, который я копировал только для реализации), и возникает проблема, когда я устанавливаю LineHeight и LetterSpacing текста и повторно инициализую cceditor

Чтобы было ясно, вот сценарий:

Это html по умолчанию для div

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

1. Когда я дважды щелкните div, я запускаю код CKEDITOR.inine(content_id), упомянутый выше. Когда я устанавливаю LetterSpace, чтобы сказать, что 6px, div теперь похоже на это, что правильно

<div id="mycontent" contenteditable=true>
    <span style="letter-spacing:6px;">
        <span>The quick brown fox jumps over the lazy dog</span>
    </span>
</div>

2. Когда я устанавливаю LineHeight, скажем, 2px, div теперь выглядит следующим образом:

 <div id="mycontent" contenteditable=true>
    <span style="line-height:2px;">
        <span style="letter-spacing:6px;">
            <span>The quick brown fox jumps over the lazy dog</span>
        </span>
    </span>
 </div>

Все отлично работает здесь до следующего сценария:

3. Я выхожу из div, я вызываю этот код, который уничтожит экземпляр.

$("#content_id").attr("contenteditable", false);
CKEDITOR.instances[content_id].destroy();

4. Я снова дважды щелкните div и я снова инициализирую код выше CKEDITOR.inine(content_id), и теперь html будет таким, как это

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

Div возвращается в исходное состояние и удаляются промежутки с разметкой букв и высотой строки.

Кто-нибудь испытал что-то подобное?

Bogz 14 дек. 2013, в 15:06

Источник

0

Смотрите это: docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Reinmar 15 дек. 2013, в 09:16

Теги:

html

ckeditor

inline

1 ответ

Ещё вопросы

Смотрите это: docs.ckeditor.com/#!/guide/dev_advanced_content_filter

Bogz · Answer 1 · 2013-12-15T13-49-00.000Z

После нескольких часов проб и ошибок, благодаря Рейнмару, который дал мне эти документы: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter и привел меня сюда http://docs.ckeditor.com/#!/апи /CKEDITOR.config-CFG-allowedContent

Сейчас все отлично работает.

Из

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id );

к

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id, {
  allowedContent : true
});

Это работает как шарм, и я не уверен, почему. Я просто установил allowContent в true, поскольку в документации он говорит:

true - отключит фильтр (данные не будут отфильтрованы, все функции будут активированы)

Надеюсь, для этого не будет никаких побочных эффектов.