CKEditor: класс или идентификатор для тела редактора

Question

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

Существует документация API , которая должна предоставлять доступ к соответствующим элементам DOM, но я не могу заставить его работать. Все объекты, которые я пытаюсь запросить таким образом, оказываются неопределенными.

Кто-нибудь знает, как это сделать или как правильно обращаться к элементам dom CKEditor?

Редактировать : Спасибо, ребята, ответ nemisj сделал это для меня, но по какой-то причине я не могу установить галочку «принято» в этом вопросе.

Answer 1

Хотя эта часть API не была портирована из 2.x во время, когда был задан этот вопрос, теперь проще использовать параметры конфигурации bodyId и bodyClass .

Конечно, объяснение nemisj хорошо и может быть полезно для других вещей, но вы должны помнить, что каждый раз, когда вы переключаетесь с дизайна (на исходный вид), iframe уничтожается, поэтому вам нужно будет переназначьте свои атрибуты, если вы делаете это вручную.

Answer 2

Если вы говорите о CKEditor (версия 3), то есть возможность получить любой экземпляр DOM внутри самого редактора. Каждый экземпляр CKEditor имеет ссылку на свой документ через свойство document.

var documentWrapper = edit.document; 

Эта ссылка представляет некоторую общедоступную оболочку для всех узлов CKEditor, но она также имеет прямую ссылку на свой узел. Вы можете получить, получив свойство ["$"].

var documentNode = documentWrapper.$; // or documentWrapper['$'] ;

documentNode будет представлять экземпляр DOM узла документа внутри iframe. Получив экземпляр DOM, вы можете делать со структурой DOM все, что хотите, добавлять, удалять, заменять классы, перестраивать и т. Д.

documentNode.body.className = "zork";

Надеюсь, этого будет достаточно.

Answer 3

У меня была такая же проблема сегодня при попытке установить bodyClass следующим образом:

CKEDITOR.replace ('editor1', { fullPage: правда, bodyClass: 'myClass'

});

Я обнаружил, что в этой версии (3.3.1), если вы установите fullpage = true, установка bodyId или bodyClass не будет работать, но если вы установите fullPage = false, это сработает.

Надеюсь, это поможет.

Answer 4

Из Руководства :

<static> {String|Array} CKEDITOR.config.contentsCss

CSS-файл (ы), который будет использоваться для применения стиля к содержимому. Он должен отражать CSS, используемый на последних страницах, где должно использоваться содержимое.

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

Значение по умолчанию:

<CKEditor folder>/contents.css

Answer 5

В config.js напишите этот код

config.bodyId = 'contents_id';

тогда вы видите идентификатор тела в Ckeditor, но когда вы хотите получить доступ к этому идентификатору, пожалуйста, используйте

$('#parent_id').find('iframe').contents().find('#within_iframe')

там $('#parent_id') означает form_id или любого родителя, который является просто способом доступа к iframe. следуйте этому коду, чтобы получить доступ к элементу в iframe

Answer 6

Ваши запросы могут возвращать неопределенные, потому что экземпляры редактора помещены в iFrame, а ваш запрос там не просматривается?

Answer 7

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

Тем не менее, вы можете попробовать Редактор TinyMCE , который имеет «партнерство» с библиотекой jQuery javascript для манипулирования всем, что вы хотите, а сам редактор довольно легко изменить практически любым способом.