По визуальному редактору CKeditor

Версия MODX: Revolution

Читал в сети, что можно сделать в визуальном редакторе CKeditor приредактировании ресурса представление 1:1 как на самом сайте. Как это можно реализовать?

И другой момент. Например, у меня в тексте используются картинки. Каждый раз при вставке картинки в текст ресурса приходится переключаться в режим html и руками прописывать выравнивание, отступы, обводку и прочее. Как это можно реализовать, чтобы, например, в выпадающем меню «Стили» был пункт «Картинка влево» или «Картинка вправо», где уже будут прописаны нужные стили?

Или вообще, как интегрировать стили контента шаблона в CKEditor?

Спасибо за помощь.

Дима
30.12.16 в 04:12

Комментарии (5)

Павел Романов 30.12.2016 09:58 #
Для нормального представления создайте CSS-файл с нужными стилями (соответствующими фронтенду) и пропишите его в ключе
editor_css_path в системных настройках (раздел «Визуальный редактор»).

Для стилей создайте JS-файл по образцу manager/assets/components/ckeditor/ckeditor/styles.js с нужными стилями. Например:
```
CKEDITOR.stylesSet.add( 'default', [
    /* Block Styles */
    { name: 'Код', element: 'code' },
    /* Inline Styles */
    {name: 'Синим', element: 'span', attributes: { 'class': 'blue'} },
    {name: 'Красным', element: 'span', attributes: { 'class': 'red'} },
    /* Object Styles */
    {name: 'Картинка влево', element: 'image', attributes: { 'style': 'float:left; margin:0 10px 10px 0;'} },
    {name: 'Картинка вправо', element: 'image', attributes: { 'style': 'float:right; margin:0 0 10px 10px;'} },
    // и т. д.
] );
```
И пропишите путь к нему в системной настройке ckeditor.styles_set в разделе ckeditor.
После этого нужные стили появятся в списке.
1. Дима 30.12.2016 14:09 #
  
  А назначить путь к уже используемым CSS на сайте ему не получится?
  1. Павел Романов 30.12.2016 14:12 #
    
    Получится, только там могут быть стили, которые будут конфликтовать с редактором. Например, если у Вас body с каким-то фоном, то и он пропишется в окно редактора, а это не всегда гуд ).
    Поэтому лучше основные стили вынести в отдельный файлик и его уже подключить к редактору.
    1. Дима 30.12.2016 14:24 #
      
      Понял)) Спасибо большое) попробую С наступающим НГ!)

Сеня 31.08.2017 15:46 #

   [[*content:replace=`float:left==float:left;margin:0 20px 10px 0`:or:replace=`float:right==float:right;margin:0 0 10px 20px`]]

это если ничего не помогает

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.