Мы пытаемся использовать CKEditor для очистки входных данных для отправки стороннему пакету отчетов, который поддерживает только определенные теги html (div, span, ol, ul, li) плюс атрибут стиля в этих тегах.Для целей этого поста я довольно близко подхожу к окончательному решению, указав стили span для всех параметров .coreStyles_ * и div для всех параметров .format_ *.
Вариант использования: пользователь будет либоскопируйте из какого-то другого места и вставьте в CKEditor для редактирования, непосредственно отредактируйте в CKEDITOR или их комбинации.Затем, после внесения изменений, скопируйте и вставьте в другую систему.Не идеально, но это то, с чем мы должны сейчас работать.
Я сталкиваюсь с трудностями, когда дело касается тегов br и некоторых тегов div и p.
Вот что яЯ хотел бы достичь (хотя я открыт для других предложений):
br, replace with <div style="clear: both"></div>
p = config.format_p = {
element: 'div',
styles: {
'display': 'block',
'margin-top': '1em',
'margin-bottom': '1em',
'margin-left': '0',
'margin-right': '0'
}
};
div = <div style="\1"> where \1 is whatever the existing style is from the copy/paste operation.
Вот мой текущий статус и проблемы:
- CKEDITOR.config.enterMode = CKEDITOR.ENTER_Pправильно преобразуется в .format_p, если Style = Normal выбран или установлен.Задача заключается в том, что пользователь должен выбрать «Обычный», и я не смог разобраться, как использовать формат по умолчанию.Я пытаюсь избежать использования CKEDITOR.ENTER_DIV, как рекомендовано командой CKEditor.
- CKEDITOR.config.enterShiftMode, кажется, не отвечает, когда я устанавливаю его в CKEDITOR.ENTER_DIV.Возможно, не поддерживается, но для подтверждения может потребоваться еще один цикл очистки кэша.
Стандартные теги Div, похоже, преобразуются в набор стилей div для тега div непосредственно перед ним.Например, если это код
некоторый текст здесь
в редакторе и пользователь нажимает клавишу ввода, то этот тег div со стилем (но не текстом) повторяется.Однако, если это так:
<div style="text-align: center;">test text</div>
, то повторяется
<div style="text-align: center;"> </div>
, а не код, который я указал для format_p.
Итак, что возможнорешения:
- Стоит ли смотреть на создание плагина, который обрабатывает эту обработку?
- Или есть какая-то комбинация настроек конфигурации, которую я могу использовать, чтобы осуществить это?
Спасибо за вашу помощь!
Поддержка фрагментов кода.Я могу добавить больше, но это уже долго, как есть.Дай мне знать!(Из файла html).
<div id="editToolBar" style="mar"></div>
<div id="editor1" contenteditable="true" style="height:500px;"><p>Testing</p></div>
<script>
CKEDITOR.config.removePlugins = 'magicline,maximize,resize,floatingspace,sourcearea,stylescombo,tableselection,tabletools,table';
CKEDITOR.config.extraPlugins = 'sharedspace,sourcedialog';
CKEDITOR.config.enterMode = CKEDITOR.ENTER_P;
CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_BR;
</script>
Образцы из config.js
config.toolbarGroups = [
{ name: 'document', groups: ['< >', '-', 'mode', 'document', 'doctools'] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] }
];
var htmlElement = document.getElementById('editToolBar');
config.sharedSpaces = {
top: htmlElement
};
config.removeButtons = 'Templates,CreateDiv,Blockquote,Language,Link,Unlink,Anchor,PageBreak,Flash';
config.coreStyles_bold = {
element: 'span',
styles: { 'font-weight': 'bold' }
};
config.format_p = {
element: 'div',
styles: {
'display': 'block',
'margin-top': '1em',
'margin-bottom': '1em',
'margin-left': '0',
'margin-right': '0'
}
};
config.format_h1 = {
element: 'div',
styles: {
'display': 'block',
'font-size': '2em',
'margin-top': '0.67em',
'margin-bottom': '0.67em',
'margin-left': '0',
'margin-right': '0',
'font-weight': 'bold'
}
};