CKEDITOR преобразует тег p / br в div - PullRequest
0 голосов
/ 25 сентября 2018

Мы пытаемся использовать 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.

Вот мой текущий статус и проблемы:

  1. CKEDITOR.config.enterMode = CKEDITOR.ENTER_Pправильно преобразуется в .format_p, если Style = Normal выбран или установлен.Задача заключается в том, что пользователь должен выбрать «Обычный», и я не смог разобраться, как использовать формат по умолчанию.Я пытаюсь избежать использования CKEDITOR.ENTER_DIV, как рекомендовано командой CKEditor.
  2. CKEDITOR.config.enterShiftMode, кажется, не отвечает, когда я устанавливаю его в CKEDITOR.ENTER_DIV.Возможно, не поддерживается, но для подтверждения может потребоваться еще один цикл очистки кэша.
  3. Стандартные теги Div, похоже, преобразуются в набор стилей div для тега div непосредственно перед ним.Например, если это код

    некоторый текст здесь

в редакторе и пользователь нажимает клавишу ввода, то этот тег div со стилем (но не текстом) повторяется.Однако, если это так:

 <div style="text-align: center;">test text</div>

, то повторяется

 <div style="text-align: center;"> </div>

, а не код, который я указал для format_p.

Итак, что возможнорешения:

  1. Стоит ли смотреть на создание плагина, который обрабатывает эту обработку?
  2. Или есть какая-то комбинация настроек конфигурации, которую я могу использовать, чтобы осуществить это?

Спасибо за вашу помощь!

Поддержка фрагментов кода.Я могу добавить больше, но это уже долго, как есть.Дай мне знать!(Из файла 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'
    }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...