Добавьте стиль класса в текст CKEditor с помощью javascript - PullRequest
0 голосов
/ 28 мая 2020

Я создаю автономную веб-страницу и использую CKEditor 4.6.2 для ввода. Моим последним препятствием на данный момент является попытка применить стиль класса css к тексту, вставленному через javascript. Мой css находится в заголовке, ничего особенного. Я определил набор стилей, как указано в документации CKEditor .

CKEDITOR.stylesSet.add('my_custom_styles', [
      // Block-level Styles
      { name: 'My Custom Block', element: 'p',
        styles:{
          'color': 'dimgray',
          'padding-left':'15px',
          'border-left-style':'solid',
          'border-width':'3px',
          'border-color':'#52bab3',
          'margin-left':'2px',
        }
      },
      { name: 'MyCustomInline', element: 'span', attributes: {'class': 'redText'}
      }
    ]);

И добавил его в CKEditor

CKEDITOR.replace('LogBook', {
      language: 'en',
      uiColor: '#9AB8F3',
      toolbar: [
        ['Undo','Redo','-'],
        ['Bold','Italic','Underline','Strike','-'],
        ['RemoveFormat','-'],
        ['NumberedList','BulletedList','-'],
        ['HorizontalRule'],
        '/',
        ['Styles','-','Source','-','About','Maximize'],
      ],
      removeButtons: 'Subscript,Superscript,Cut,Copy,Paste,Anchor,Scayt,PasteText,PasteFromWord,Image,SpecialChar,Link,Unlink,Table,Indent,Outdent,Blockquote,Format',
      removePlugins: 'wsc,scayt',
 stylesSet:'my_custom_styles',
 allowedContent: true
    })

Но, черт возьми, я не могу выяснить, как применить класс к элементу в редакторе с помощью javascript вот так ...

<p class="My Custom Block">Some text here</p>

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

Я также пробовал применять стили прямо из моей таблицы стилей, например:

<p class="redText">Some text here</p>

Но снова элемент абзаца не стилизован.

Любая помощь была бы отличной , спасибо.

1 Ответ

1 голос
/ 29 мая 2020

После долгого поиска я, наконец, наткнулся на ответ (по surtyaar ближе к низу), чтобы добавить класс к элементам CKEditor. объявляются экземпляры CKEditor.

Из CKEditor docs .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...