Использование классов для выравнивания ckeditor - PullRequest
Новая
       12

Использование классов для выравнивания ckeditor

2 голосов
/ 04 сентября 2011

Я использую ckeditor, и это действительно здорово.Единственная проблема, с которой я столкнулся, это то, что я пытаюсь использовать классы вместо стиля при выравнивании объектов.Более конкретно, я хочу использовать класс alignleft для выравнивания левых изображений вместо использования style = "float: left" .Для этого я изменил плагин ckeditor / plugins / image / dialogs / image.js

В id: 'cmbAlign' я изменил настройку и метод commid так, чтобы он добавлялКласс «alignleft» или «alignright» в зависимости от ситуации, но, как ни странно, он не работает, когда я пытаюсь изменить класс (используя removeClass или addClass, setAttribute ('class') тоже не работает).Код: 

id:'cmbAlign',
    type:'select',
    widths:['35%','65%'],
    style:'width:90px',
    label:b.lang.common.align,
    'default':'',
    items:[[b.lang.common.notSet,'none'],[b.lang.common.alignLeft,'left'],[b.lang.common.alignRight,'right']],
    onChange:function(){
        l(this.getDialog());
        o.call(this,'advanced:txtdlgGenStyle');
    },
    setup:function(C,D){
        if(C==d){
            var E=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(E&&E[1])E = E[1];else E='';
            this.setValue(E);
        }
    },
    commit:function(C,D,E){        
        var F = (this.getValue()+'');
        if(C==d||C==f){
            var G=(D.getAttribute('class')+'').match(/align([a-z]+)?/);
            if(G&&G[1]){
                if(F!=G[1]){
                    D.removeClass('align'+G[1]);
                    if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
                }
            } else {
                if(F!=='')D.setAttribute('rel',F); D.addClass('align'+F);
            }

        }
}

Обратите внимание, что я добавил D.setAttribute('rel',F), и он отлично работает.

У кого-нибудь есть идеи или решения для этого ??

Ответы [ 2 ]

5 голосов
/ 04 сентября 2011

Вот немного больше информации:

Распакованная версия этого кода находится в:

ckeditor / _source / plugins / image / dialogs / image.js (строка 994)

Вместо того, чтобы угадать, что означают все эти буквы, вы можете увидеть реальные объекты, переменные и функции, которые в них вовлечены.

Информация, которую я разместил о прослушивании событий диалога, была основана на том, чтокод и посмотреть, что он делает.

Вам нужно остановить диалоговое окно от добавления встроенного стиля с плавающей запятой, иначе он переопределит стиль, который вы применяете к своему классу.Плавание не добавляется как класс, поэтому использование addClass или removeClass не окажет на него никакого влияния.Это означает, что вам нужно подходить к проблеме по-другому.

Вот несколько вариантов, которые мне пришли в голову, я ожидаю, что другие люди могут предложить дополнительные подходы:

1) Вы можетеизмените код в плагине изображения (но он может быть перезаписан при обновлении редактора).

2) Сделайте копию плагина изображения и измените код, чтобы создать собственный плагин, а затем замените кнопку изображенияс тем, который вызывает ваш плагин.

3) Работайте извне кода диалога, прослушивая событие диалога, затем остановите добавление встроенного стиля с плавающей точкой и добавьте вместо него свой класс.

Надеждаэто помогает,Джо

Какую версию CKEditor вы используете?Я использую 3.6.1.

Я искал "cmbAlign" в файле ckeditor / plugins / image / dialogs / image.js.Я изменил этот бит в строке 11: 

id:'cmbAlign',type:'select',widths:['35%','65%'],style:'width:90px'.....

Я изменил "width: 90px" на "width: 290px", и диалоговое окно стало намного шире.Поэтому изменение в этом файле влияет на мою установку.

Возможно ли, что вы работаете с распакованным файлом, найденным в каталоге _source ?:ckeditor / _source / plugins / image / dialogs / image.js

Просто упомяну это, потому что эти файлы не загружаются, пока вы не загружаете один из файлов ckeditor_basic вместо файла ckeditor.js.

A Возможный подход:

Вы можете создать собственный плагин, который заменит плагин для изображений.Здесь есть обучающий раздел с простыми инструкциями по созданию плагина:

http://docs.cksource.com/CKEditor_3.x/Tutorials

Вы можете использовать это как обзор того, как работают плагины, но вы действительно просто внесете несколько изменений в плагин изображений по умолчанию.

Просто скопируйте папку подключаемых модулей изображений из каталога ckeditor / _source / plugins и поместите ее в каталог ckeditor / plugins.Вам нужно будет переименовать плагин и отключить плагин изображений по умолчанию.Затем вы можете внести изменения, которые вы указали в своем посте, в файл image.js.

Чтобы отключить плагин для изображения по умолчанию, добавьте его в свои настройки: 

config.removePlugins = 'image';

Другой возможный подход:

Добавьте прослушиватель событий на страницу, вы можете настроить скрипт для выполнения следующих действий:

Наблюдайте за событием "dialogShow" и проверяйтеесли открывшийся диалог является диалогом изображения.Если это так, прослушайте событие изменения селектора выравнивания.Когда селектор выравнивания изменяется, проверьте, выбрано ли «выравнивание по левому краю».Если это так, остановите распространение команды и вставьте имя своего класса в поле «Классы таблиц стилей» на вкладке «Дополнительно».

Вы можете установить приоритет прослушивателя событий для изменения селектора на «1», чтобы он действовал до запуска кода по умолчанию.Документы для метода «on» показывают доступные параметры:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html#on

Вы можете посмотреть в следующем посте пример кода и дополнительную информацию о его настройке (используется jQuery):

ckeditor добавляет обработчик событий к элементу диалога

В этом посте второй раздел ответа (в верхней части) начинается с:

Начать цитату Если вы хотите прослушать изменение элемента select из другого места, вы можете создать прослушиватель, который будет указывать на событие dialogShow.Вот пример: 

// Watch for the "dialogShow" event to be fired in the editor,

Конец цитаты

Кроме того, вы захотите обернуть слушатель для события «dialogShow» внутри слушателя для события «instanceReady», вот пример кода для этого (используется jQuery):

// After both the document and editor instance are ready, 
// Start listening for the image dialog

// Wait for the document ready event
$(document).ready(function(){

  // Wait for the instanceReady event to fire for this (editor1) instance
  CKEDITOR.instances.editor1.on( 'instanceReady', 
    function( instanceReadyEventObj )
    {
      var currentEditorInstance = instanceReadyEventObj.editor;

      ...Put Code To Listen For The "dialogShow" Event Here...
    }
  );
});

Дайте мне знать, если у вас есть какие-либо вопросы о том, что я написал.

Будь здоров, Джо

2 голосов
/ 04 сентября 2011

Если вы изменяете файлы ядра, будьте осторожны при обновлении CKEditor.Самое простое (но не самое удобное для редактора) решение:

CKEditor image dialog

...