2013-11-19 2 views
4

У меня есть страница, где я инициализировал Bootstrap-WYSIWYG и CKEditor вместе.Почему CKEditor добавляет себя в divs, где он не должен?

Проблема заключается в том CKEditor продолжает добавлять себя Bootstrap-WYSIWYG деление с хотя я специально инициализирован CKEditor с помощью class="ckeditor"

Мой код выглядит следующим образом:

<textarea class="ckeditor" name="editor1"></textarea> 

страница может быть найдена на http://cloudadmin-theme.elasticbeanstalk.com/rich_text_editors.html

Попробуйте щелкнуть на вкладке, которая говорит «Редактор загрузочного лотка с ярлыками клавиш» где написано «Вперед ...». Это вызывает CKEditor onfocus, что странно!

Я нахожусь в своем уме. Может ли кто-нибудь любезно вести меня. Что я делаю не так?

+0

уменьшенная JavaScripts не помогает понять проблему. Где вы создаете экземпляр ckeditor ?? – giammin

+0

К сожалению, извините. Я не создавал экземпляр ckeditor. Я использовал свою процедуру инициализации по умолчанию, которая запрашивает, чтобы class = "ckeditor" добавлялся в текстовое поле, где требуется CKEditor. – LittleLebowski

+0

это автоматический встроенный режим для элементов с contenteditable = "true" – giammin

ответ

17

CKEDITOR по умолчанию будет автоматически подключать элементы, которые имеют атрибут contenteditable="true". Вы хотите отключить CKEDITOR's auto inline editing, или это можно сделать в глобальной конфигурации.

CKEDITOR.disableAutoInline = true; 

Я предпочитаю делать это в коде, а не в конфигурации, так что если кто-либо использует его, вы не затягивайте их.


Основываясь на ваш комментарий о включении CKEditor This is pulled from the CKEDITOR 4 docs

Включение Инлайн редактирование

Инлайн редактирование включена непосредственно на HTML-элементов через contenteditable атрибут HTML5 .

Предположим, например, что вы хотите сделать элемент редактируемым. Для того, чтобы достичь этого, достаточно сделать так:

<div id="editable" contenteditable="true"> 
    <h1>Inline Editing in Action!</h1> 
    <p>The div element that contains this text is now editable. 
</div> 

Также можно включить редактирование с явным кодом, с помощью вызова метод CKEDITOR.inline:

<div id="editable" contenteditable="true"> 
    <h1>Inline Editing in Action!</h1> 
    <p>The div element that contains this text is now editable. 
</div> 
<script> 
    // Turn off automatic editor creation first. 
    CKEDITOR.disableAutoInline = true; 
    CKEDITOR.inline('editable'); 
</script> 
+0

Большое спасибо! Это работало как прелесть. Кстати, @giammin тоже прав, что мы можем с этим поделать? Можем ли мы включить его для отдельных элементов с помощью кода? – LittleLebowski

+0

Да, вы вручную вызываете элементы, которые хотите быть редакторами, как это написано в документах: http://docs.ckeditor.com/#!/guide/dev_inline – epascarello

+0

Большое вам спасибо за подробный ответ! :) – LittleLebowski

3

То, что вы испытываете, - это ckeditor inline editor mode.

Он автоматически инстанцирован когда у вас есть HTML элемент с:

contenteditable="true" 

Чтобы избежать этого вы можете удалить этот атрибут, или вы можете поместить в/CKEditor/конфигурации.JS файл

CKEDITOR.disableAutoInline = true; 

Чтобы связать CKEditor в standard mode вы можете использовать:

CKEDITOR.replace('editor1'); 

Если вы хотите, чтобы связать его в inline mode:

CKEDITOR.inline('editor1'); 
Смежные вопросы