Ckeditor

Содержание

Usage

Load editor via CKEditor CDN

# in config/initializers/ckeditor.rb

Ckeditor.setup do |config|
  # //cdn.ckeditor.com/<version.number>/<distribution>/ckeditor.js
  config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"
end

In view template include ckeditor CDN:


= javascript_include_tag Ckeditor.cdn_url

Precompile ckeditor/config.js:

# in config/initializers/assets.rb

Rails.application.config.assets.precompile += %w[ckeditor/config.js

Form helpers

= form_for @page do |form|
  = form.cktext_area :notes, class: 'someclass', ckeditor: { language: 'uk'}
  = form.cktext_area :content, value: 'Default value', id: 'sometext'
  = cktext_area :page, :info, cols: 40, ckeditor: { uiColor: '#AADC6E', toolbar: 'mini' }

It also works with bootstrap-form

= bootstrap_form_for resource do |form|
  = form.cktext_area :text, ckeditor: { language: 'uk'}

Customize ckeditor

In order to configure the ckeditor default options, create the following files:

Custom toolbars example

Adding a custom toolbar:

# in app/assets/javascripts/ckeditor/config.js

CKEDITOR.editorConfig = function (config) {
  // ... other configuration ...

  config.toolbar_mini = 
    "Bold",  "Italic",  "Underline",  "Strike",  "-",  "Subscript",  "Superscript",
  ;
  config.toolbar = "mini";

  // ... rest of the original config.js  ...
}

When overriding the default file, you must set all configuration options yourself as the bundled will not be loaded. To see the default configuration, run , copy into your project and customize it to your needs.

Install additional plugins

You should download necessary plugins with all dependencies and extract them in . After that you can include your plugins in in this way:

CKEDITOR.editorConfig = function (config) {
  config.extraPlugins = 'eqneditor,autosave,';
}

AJAX

jQuery sample:

<script type='text/javascript' charset='UTF-8'>
  $(document).ready(function(){
    $('form').bind('ajax:before', function(){
      for (instance in CKEDITOR.instances){
        CKEDITOR.instancesinstance.updateElement();
      }
    });
  });
</script>

SimpleForm integration

Note that the toolbar option should match the case specified in the config. If the config is not found it defaults to all available toolbar items.

i.e. config.toolbar_mini becomes {toolbar: ‘mini’} in the form.

= form.input :content, as: :ckeditor, input_html: { ckeditor: { toolbar: 'Full' } }

Turbolink integration

Create a file app/assets/javascripts/init_ckeditor.coffee

ready = ->
  $('.ckeditor').each ->
    CKEDITOR.replace $(this).attr('id')

$(document).ready(ready)
$(document).on('page:load', ready)

Make sure the file is loaded from your app/assets/javascripts/application.js

CanCanCan integration

To use cancan with Ckeditor, add this to an initializer:

# in config/initializers/ckeditor.rb

Ckeditor.setup do |config|
  config.authorize_with :cancancan
end

At this point, all authorization will fail and no one will be able to access the filebrowser pages. To grant access, add the following abilities (usually )

# Always performed
can :access, :ckeditor   # needed to access Ckeditor filebrowser

# Performed checks for actions:
can :read, :create, :destroy, Ckeditor::Picture
can :read, :create, :destroy, Ckeditor::AttachmentFile

Pundit integration

Just like CanCanCan, you can write this code in your config/initializers/ckeditor.rb file:

Ckeditor.setup do |config|
  config.authorize_with :pundit
end

Then, generate the policy files for model Picture and AttachmentFile

By this command, you will got two files:

By default, only the user that logged in can access the models (with actions index and create) and only the owner of the asset can destroy the resource.

You can customize these two policy files as you like.

# Additional information

How builds were designed

Each build was designed to satisfy as many use cases as possible. They differ in their UI, UX and features, and are based on the following approach:

  • Include the set of features proposed by the Editor Recommendations project.
  • Include features that contribute to creating quality content.
  • Provide setups as generic as possible, based on research and community feedback.

Use cases

Each of the builds fits several different use cases. Just think about any possible use for writing rich text in applications.

The following are some common use cases:

  • In content management systems:
    • Forms for writing articles or website content.
    • Inline writing in a frontend-like editing page.
    • Comments.
  • In marketing and sales automation applications:
    • Composing email campaigns.
    • Creating templates.
  • In forum applications:
  • In team collaboration applications:
  • Other uses:
    • User profile editing pages.
    • Book writing applications.
    • Social messaging and content sharing.
    • Creation of ads in recruitment software.

When NOT to use builds?

CKEditor 5 Framework should be used, instead of builds, in the following cases:

  • When you want to create your own text editor and have full control over its every aspect, from UI to features.
  • When the solution proposed by the builds does not fit your specific use case.

In the following cases CKEditor 4 should be used instead:

  • When compatibility with old browsers is a requirement.
  • If CKEditor 4 contains features that are essential for you, which are not available in CKEditor 5 yet.
  • If CKEditor 4 is already in use in your application and you are still not ready to replace it with CKEditor 5.

In the following cases Letters may be used instead:

  • When you want an easy way to enable, as part of your application, the creation of articles and documents that feature:
    • Real-time collaborative writing.
    • Inline comments and discussion in the content.
    • Advanced writing features.

Настройка CKEditor

Переходим в меню Конфигурация → Работа с содержимым → CKEditor. Сначала посмотрим что нам предлагают глобальные настройки. Пропускаем выбор шкурок и переходим к самому интересному — Расширенным настройкам.

Первым и единственным обязательным пунктом является Path to CKEditor — путь до CKEditor. Здесь может быть любой внешний URL. По умолчанию стоит cdn — оптимальный вариант если только у вас нет причин использовать свой вариант.

Local path to CKEditor — путь до CKEditor на вашем сервере. Указываем или абсолютный путь или относительно файла index.php

Далее также определяется место расположения плагинов и файл менеджера CKFinder. В описании каждого пункта настройки есть список «заменителей» и адрес соответствующий текущим настройкам.

Также в глобальных настройках можно включить агрегацию(не рекомендуется) и включить/выключить drag-and-drop при настройке интерфейса. Отключение drag-and-drop не такая уж и бесполезная функция, как может показаться. Пример из личного опыта. Во время настройки редактора я перестарался с подключением/отключением плагинов. В какой-то момент у меня перестала отображаться кнопка для вставки кода. Отключив перетаскивательный интерфейс я прописал название кнопки в ручную и кнопка появилась. Главное знать как называются кнопки.

Переходим к настройкам профилей. Доступны они стой же страницы Конфигурация → Работа с содержимым → CKEditor.

В базовых настройках отмечаем для каких режимов форматирования доступен этот профиль. В разделе безопасности перечислены какие фильтры применены. О фильтрах расскажу позже.


Editor appearance — внешний вид редактора. Прежде всего выбираем кнопки. Если в глобальных настройках включён drag-and-drop то кнопки можно перетаскивать мышкой. С помощью вертикальных и горизонтальных линий группировать кнопки. Также в этом блоке настроек можно разрешить включать/отключать редактор(Show the disable/enable rich text editor toggle) и скрывать кнопки делая их видимыми по клику(Toolbar state on startup). Далее идёт выбор цветовой схемы. Можно выбрать одну из представленных или настроить свою.

За счёт списка плагинов можно прокачать редактор добавив дополнительные возможности. Некоторые плагины достаточно подключить(счётчик знаков и слов) и они будут работать. Для некоторых нужно добавить кнопку, как на пример для плагина вставки картинок через IMCE. Я бы не рекомендовал использовать этот плагин о причинах читайте в следующем разделе про добавление картинок. Для некоторых нужно ещё настроить фильтры как например для плагина вставляющего код. Если чего-то не работает не спешите всё валить на плагин. Последними в данном блоке идут языковые настройки.

Следующий блок настроек Advanced content filter. Здесь включаются фильтры и задаются параметры фильтрации для вводимого содержимого. Я предпочитаю настраивать фильтры в режимах форматирования.

Блок настроек Cleanup and output определяет ввод и вывод содержимого. По умолчанию настройки установлены так что при нажатии на Enter будет создаваться новый абзац а при Enter + Shift перенос строки в текущем абзаце. Плюс к этому можете настроить опции форматирования HTML кода. Внешне ваше содержимое от этого не измениться. В блоке настроек CSS определяется внешний вид редактора. Выбираете один из вариантов или указываете путь до css файла.

File browser settings — выбираем файл менеджер для вставки картинок. Я пользуюсь IMCE. Если вам по душе CKFinder то здесь же можно указать папку для закачиваемых файлов. В дополнительных настройках можно разрешить CKEditor заменять вставляемый HTML как простой текст и включить проверку орфографии.

Появляется глюк с добавлением новых пустот ( ) при каждом редактировании.

Выявлено, что глюк появляется при вставке тизера друпал. Если в статье не отделять анонс, то глюка нет.

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

Путь к настройке показа анонса:

Главная » Администрирование » Structure » Типы содержимого » Article » Управлять отображением

Совет. Следует при настройке внешнего вида визуального редактора убрать кнопочку тизер-друпал в обоих профилях .

Статьи для изучения drupal:

Создание сайтов на drupal — общие понятия для новичков.

Выбор версии и установка drupal — как русифицировать друпал и модули к нему.

Модули drupal для создания блогов — подборка блоговых модулей.

Quick start

CKEditor 5 Builds are a set of ready-to-use rich text editors. Every «build» provides a single type of editor with a set of features and a default configuration.

The following CKEditor 5 Builds are currently available:

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

  1. Load the desired editor via the tag.
  2. Call the static method to create the editor.

In your HTML page add an element that CKEditor should replace:

<divid="editor"><div>
<scriptsrc="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
<script>    ClassicEditor.create(document.querySelector('#editor')).catch(error=>{console.error( error );});</script>

You’re ready to go!

CKEditor 5 Builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.

Загрузка изображений в CKEditor — IMSE vs CKFinder

За загрузку картинок у меня отвечает IMCE. Я не стал заморачиваться с CKFinder потому что он платный. Да у него есть демоверсия. Не знаю ограничена она только по функционалу или ещё и по времени. Самый главный минус — чтобы всё заработало нужно лезть в конфигурационные файлы. С IMCE таких проблем нет. Ставим модуль, выбираем IMCE как файл-менеджер в настройках CKEditor и можем работать.

Перейдём в меню Конфигурация→ Мультимедиа → IMCE.

Первым идёт список профилей. IMCE может наделять пользователя большими правами по управлению файлами. Чтобы левые люди не воспользовались ими, в IMCE предусмотрены профили. К ним мы вернёмся позже. Дальше идёт список ролей пользователей и соответствующие им профили. Не достаточно в настройках CKEditor указать IMCE как файл-менеджер и добавить кнопку. Здесь нужно явно задать какой роли какой профиль соответствует. Последними идут общие настройки. С них и начнём.

Первое что нам предлагают это подключить IMCE к полям не имеющим редактора. Нужно вписать через запятую ID таких полей, после чего под полем появиться ссылка по клику на которую можно будет закачать картинку. Далее идёт включение абсолютных URL для файлов. Ещё один интересный пункт — как поступать с файлами с одинаковым названием. По умолчанию новый файл будет переименовываться.

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

С основными настройками разобрались переходим к настройкам профилей. С начала идёт стандартное поле с названием профиля. Далее ограничения по размеру, весу и формату загружаемых файлов

Обратите внимание что есть квота на папку и квота на пользователя. Дело в том что свои файлы пользователь может загружать в разные папки

Для этого в таблице Directories нужно задать доступные адреса. Там же можно выбрать доступные действия.

В поле адрес папки можно вписать PHP код для создания адресов. IMCE будет сам создавать папки для пользователей. Инструкция как это сделать есть под таблицей.  Такой подход к созданию папок удобен тем, что файлы пользователей лежат по отдельным папкам а не в общей куче. Очень удобно если на сайте много пользователей с правом на добавление контента. Можно пойти дальше и не ограничиваться просто созданием директории с именем пользователя а добавить в неё вложенные директории с датой. В поле адрес папки вписать php: return $user->name.’/’.date(‘m-Y’); В итоге в адресе кроме имени пользователя будет текущий месяц и год. Каждый месяц будет создаваться новая папка. Для чего это нужно? Помните в настройках квот можно указывать максимальный объём для папки и для пользователя в целом. Ограничив пользователя рано или поздно вы столкнетесь с проблемой что пользователь исчерпает свой лимит и тут нужно либо удалять файлы либо увеличивать квоту. Мы сделаем лучше. Ограничим объём загружаемых файлов для папки, а общую квоту сделать безлимитной. Получается что у нас есть месячная квота на объём загружаемых файлов при этом безлимит на весь аккаунт.

IMCE кроме закачки/вставки картинок может изменять их размеры. Ресайз картинок создаст дополнительную нагрузку на сервер поэтому давать пользователям разрешение на ресайз не лучшая идея. Тем более не стоит разрешать ресайз если на Drupal сайте настроены адаптивные изображения. Это делает ресайз бессмысленным.

Последним пунктом идёт настройка превьюшек. Каким образом они будут уменьшаться определяется в общих настройках, а здесь просто указывается имя, размер и префикс. Чтобы вставить изображение нужно в редакторе нажать на кнопку, затем в открывшемся окне нажать «выбрать файл на сервере» после этого вам откроется окно с IMCE. В CKEditor есть плагин позволяющий пропустить этот шаг. Подключаете в настройках редактора плагин и добавляете кнопку IMCE. Теперь файл менеджер доступен сразу по клику на кнопке. Это немного упрощает добавление изображений. Но если вы на своём сайте настроили адаптивные изображения так делать не рекомендуется. Изображения вставленные напрямую через IMCE вставляются через тег <img>, а не через <picture>. Я не советую использовать этот плагин.

# Build customization

Every build comes with a default set of features and their default configuration. Although the builds try to fit many use cases, they may still need to be adjusted in some integrations. The following modifications are possible:

  • You can override the default configuration of features (e.g. define different image styles or heading levels).
  • You can change the default toolbar configuration (e.g. remove undo/redo buttons).
  • You can also remove features (plugins).

Read more in the Configuration guide.

If a build does not provide all the necessary features or you want to create a highly optimized build of the editor which will contain only the features that you require, you need to customize the build or create a brand new one. Check Custom builds for details on how to change the default builds to match your preferences.

Packages

Name Version Description
The editing engine.
The core editor architecture.
The editor UI library.
The editor utilities library.
The file upload utilities.
The widget API.
The watchdog feature, which keeps CKEditor 5 editors running.
CKEditor 5’s Cloud Services integration layer.
CKEditor Cloud Services integration utils.
Name Version Description
The classic editor build.
The inline editor build.
The balloon editor (Medium-like) build.
The balloon editor with a block toolbar (Slack–like) build.
The document editor build, featuring the decoupled UI editor implementation.
Name Version Description
The text alignment feature.
The autoformatting feature. Replaces predefined characters with a corresponding format (e.g. becomes bold ).
The autosave feature. Makes it easy to automatically save the data to the backend.
The bold, italic, underline and code features.
The block quote feature.
The clipboard integration.
The code block feature.
The Enter key feature.
Easy Image with CKEditor Cloud Services feature.
The font size and font family features.
The heading feature.
The highlight feature (markers and pens).
The horizontal rule feature.
The image feature. Supports image styles, captioning, upload, resizing, and more.
The indentation (of lists and blocks) feature.
The link feature.
The numbered and bulleted lists feature.
The GitHub-flavored Markdown data processor.
The media embed feature.
The mention feature (autocomplete `@mentions`, `#tags`, etc.).
The page break feature.
The paragraph feature.
The Paste from Office (Word, Excel, Google Docs, etc.) plugin.
The remove format feature.
The restricted editing feature.
The «select all» feature.
The special characters feature.
The table feature.
The typing and deleting features.
The undo feature.
The word count feature.
Name Version Description
The classic editor implementation.
The inline editor implementation.
The balloon editor (Medium-like) implementation.
The editor implementation with a decoupled UI.
Name Version Description
The Lark theme.

Quick start

CKEditor 5 Builds


CKEditor 5 Builds are a set of ready-to-use rich text editors. Every «build» provides a single type of editor with a set of features and a default configuration.

The following CKEditor 5 Builds are currently available:

Example

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

  1. Load the desired editor via the tag.
  2. Call the static method to create the editor.

In your HTML page add an element that CKEditor should replace:

<div id="editor"></div>
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

You’re ready to go!

CKEditor 5 Builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.

Использование djangocms-text-ckeditor

Я разрабатываю клиентские сайты, используя фреймворк django-cms и djangocms-text-ckeditor в качестве редактора.

Если и вы используете плагин djangocms-text-ckeditor, то конфиг может выглядеть следующим образом:

def toolbar_items(cms=True):
    _item =  if cms else 
    return ,
            _item,
            ,
            ,
            ,
            ,
            ,
            ]

CKEDITOR_SETTINGS = {
    'language': '{{ language }}',
    'toolbar_CMS': toolbar_items(),
    'toolbar_HTMLField': toolbar_items(False),
    'skin': 'moono',
    'forcePasteAsPlainText': True,
    'format_tags': 'p;h1;h2;h3;pre',
    'contentsCss': ['/static/my_app/css/ckeditor_init.css', ],
    'stylesSet': ,
    'fontSize_sizes': '8/8px;9/9px;10/10px;11/11px;12/12px;13/13px;14/14px;15/15px;16/16px;17/17px;18/18px;19/19px;20/20px;'
                      '21/21px;22/22px;23/23px;24/24px;25/25px;26/26px;27/27px;28/28px;36/36px;48/48px;72/72px;1/1px;',
}

Обратите внимание, что добавляем метод для того, чтобы использовать настройки редактора ckeditor как для поля HTMLField в models.py, так и для самого плагина djangocms-text-ckeditor. Флаг в методе добавляет дополнительную кнопку cms-plugins, функциональность которой реализована в djangocms-text-ckeditor

Плюс к этому, я определил свой набор стилей и размеров шрифта — стало гораздо удобнее.

В прописываются пути к дополнительным css стилям, которые можно подгрузить в редактор. Пример моего ckeditor_init.css:

body, select, input, textarea, button, table, a, p {font-size: 18px;}

p {line-height: 26px; margin: 10px 0;}
ol > li, ul > li {line-height: 23px;margin-left: 30px;}

pre {display: block;background: #F0F0F0;position: relative;padding: 6px 26px 6px 6px;word-wrap: break-word;white-space:pre-wrap;margin: 16px 0;line-height: 21px;font-family: 'Courier New', cursive;font-size: 14px;}
code {background: #ececec;color: #151515;font-size: 16px;}

h1,h2,h3,h4,h5,h6 {font-weight: bold;margin: 16px 0 10px;}
h1 {font-size: 26px;margin-top: 32px;}
h2 {font-size: 23px;margin-top: 26px;}
h3 {font-size: 20px;margin-top: 21px;}
h4, h5, h6 {font-size: 18px;}

Ещё обратите внимание, что я намерено убрал кнопку Font, так как клиенты могут испортить дизайн сайта разными шрифтами. Хоть они и без этого могут его изрядно попортить, увеличив размеры шрифта и цвет букв и т

д. Но, как показывает практика, они так чаще всего не делают, но шрифт меняют — всё это приводит к не очень-то хорошему виду.

Автор статьи

Права на использование материала, расположенного на этой странице https://vivazzi.pro/it/ckeditor-config/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра в теге . Использование:

Автор статьи: Мальцев АртёмСсылка на статью: <a href="https://vivazzi.pro/it/ckeditor-config/">https://vivazzi.pro/it/ckeditor-config/</a>

Предыдущая статьяГде находятся логи, пути, пакеты, конфигурационные файлы пакетов в Линуксе

Следующая статьяЗапретить выполнение события клика под блоком

Вам нужно саморазвиваться или вы хотите зарабатывать деньги?

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

Посмотреть рекомендации

Wall Street Cash — Торговый робот на рынке Forex

Ознакомьтесь с роботом (советником), который автоматизирует торговлю на валютном рынке Forex без необходимости самому торговать. Преимущество робота в том, что вы сами контролируете свой счёт, а робот лишь по оптимизированным алгоритмам заключает сделки на куплю и продажу валют.

Подробнее о Wall Street Cash

Viva TM — Доверительное управление с использованием робота WSC

Доверительное управление Viva TM — это разработанный мной сервис по управлению вашими денежными средствами и заработку на рынке Форекс с использованием торгового робота Wall Street Cash. Возможность использовать моё доверительное управление подходит тем, кто не хочет или не может самостоятельно настроить робота.

Подробнее о Viva TM

Руководство пользователя: как установить и настроить редактор ckeditor в друпал 7. Загрузка изображений с Elfinder.

В друпал 7, как и в шестой версии, нам нужно установить редактор. Конечно, можно этого не делать и писать тексты, видя только код. Но мне нравятся визуальные редакторы. Напомню, что установку и настройку для друпал 6 мы изучили в уроке 2: «FCKeditor — WYSIWYG редактор. Установка и настройка fckeditor в друпал.»

Сегодня мы рассмотрим рабочую связку cms с редактором.drupal 7.17  CKEditor — WYSIWYG HTML editor 7.x-1.11CKEditor 4.0elFinder file manager 7.x-0.7скрипт elFinder — elfinder-1.2

Для друпал седьмой версии весь процесс установки и настройки гораздо проще. Не нужно ничего править в файлах, все действия доступны из админки (будем просто ставить галочки). Существующие актуальные версии модулей нам здорово облегчают жизнь.

Installation

For basic usage just include the ckeditor gem:

or if you’d like to use the latest version from Github:

Include this inside your :

For file upload support, you must generate the necessary file storage models. The currently supported backends are:

  • ActiveRecord (active_storage, paperclip, carrierwave, dragonfly)
  • Mongoid (paperclip, carrierwave, dragonfly)

ActiveRecord + paperclip

ActiveRecord + active_storage

ActiveRecord + carrierwave

ActiveRecord + dragonfly

Mongoid + paperclip

Mongoid + active_storage

Mongoid + carrierwave

Load generated models

All ckeditor models will be generated in the app/models/ckeditor directory. Models are autoloaded in Rails 4. For earlier Rails versions, you need to add them to the autoload path (in application.rb):

config.autoload_paths += %w(#{config.root}/app/models/ckeditor)

Mount the Ckeditor::Engine in your routes (config/routes.rb):

mount Ckeditor::Engine => '/ckeditor'

# Available builds

The following CKEditor 5 Builds are currently available:

Classic editor

Classic editor is what most users traditionally learnt to associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.

During its initialization the editor hides the used editable element on the page and renders “instead” of it. This is why it is usually used to replace elements.

In CKEditor 5 the concept of the “boxed” editor was reinvented:

  • The toolbar is now always visible when the user scrolls the page down.
  • The editor content is now placed inline in the page (without the surrounding element) — it is now much easier to style it.
  • By default the editor now grows automatically with the content.

To try it out online, check the classic editor example. Jump to to start using it.

Inline editor

Inline editor comes with a floating toolbar that becomes visible when the editor is focused (e.g. by clicking it). Unlike classic editor, inline editor does not render instead of the given element, it simply makes it editable. As a consequence the styles of the edited content will be exactly the same before and after the editor is created.

A common scenario for using inline editor is offering users the possibility to edit content in its real location on a web page instead of doing it in a separate administration section.

To try it out online, check the inline editor example. Jump to to start using it.

Balloon editor

Balloon editor is very similar to inline editor. The difference between them is that the toolbar appears in a balloon next to the selection (when the selection is not empty):

To try it out online, check the balloon editor example. Jump to to start using it.

Balloon block editor

Balloon block is essentially the with an extra block toolbar which can be accessed using the button attached to the editable content area and following the selection in the document. The toolbar gives an access to additional, block–level editing features.

To try it out online, check the balloon block editor example. Jump to to start using it.

Document editor

The document editor is focused on rich text editing experience similar to the native word processors. It works best for creating documents which are usually later printed or exported to PDF files.

To try it out online, check the document editor example. Jump to to start using it.

Как установить WYSIWYG редактор CKEditor на последнюю версию CMS Drupal 7.17

CKEditor – это гибкий и удобный редактор. Его интерфейс напоминает ворд. Сначала устанавливаем скрипт редактора, потом сам модуль. Именно модуль подключит его к сайту.Примечание. Я указываю конкретные версии на момент написания статьи.

На странице модулей включаем, а затем настраиваем. Идем «Конфигурация — CKEditor — Глобальный профиль CKEditor – Изменить». Здесь нужно проверить запись в поле «Путь к CKEditor» — должно быть %l/ckeditor. Эта запись показывает, что редактор находится в папке libraries.

Все. Вы установили CKEditor и он должен работать. Для проверки попробуйте открыть страницу создания нового материала. Теперь вместо одного большого поля для ввода вы увидите привычный визуальный редактор.

Если редактор не отображается: Проверьте правильность выбранных релизов модулей для вашей версии друпал. Попробуйте поменять на другой релиз.

Настройка профилей редактора CKEditor

1 шаг. Настройка профиля Advanced в редакторе CKEditor. Advanced (расширенный, с загрузкой изображений и т. д.) Идем «Управление > конфигурация > ckeditor  —    admin/config/content/ckeditor Настроим профиль Advanced, кликаем ссылку «изменить» напротив профиля Advanced. Внешний вид редактора (Editor appearance): Выбираем колор.

Перетаскиваем нужные кнопочки.

Язык выбираем русский.

File browser settings Выбираем по своему вкусу файловый менеджер, ниже по тексту есть установка и настройка файлового менеджера для друпал 7 – Elfinder.

2 шаг. Настройка профиля Full в редакторе ckeditor Идем «Управление — конфигурация – ckeditor» —  admin/config/content/ckeditor Оставить настройки можно по умолчанию, выбрать русский язык.

Самый простой вариант использовать Full (полный) и Advanced (расширенный) — для зарегистрированных, также ваши вариации. Создать для анонимных пользователей профиль Plain, где отметить автоматическое изменение html текста в простой формат.

Packages

Core libraries

Name Version Description
The editing engine.
The core editor architecture.
The editor UI library.
The editor utilities library.
The file upload utilities.
The widget API.
The watchdog feature, which keeps CKEditor 5 editors running.
CKEditor 5’s Cloud Services integration layer.
CKEditor Cloud Services integration utils.

Builds

Name Version Description
The classic editor build.
The inline editor build.
The balloon editor (Medium-like) build.
The balloon editor with a block toolbar (Slack–like) build.
The document editor build, featuring the decoupled UI editor implementation.

Features

Name Version Description
The text alignment feature.
The autoformatting feature. Replaces predefined characters with a corresponding format (e.g. becomes bold ).
The autosave feature. Makes it easy to automatically save the data to the backend.
The bold, italic, underline and code features.
The block quote feature.
The clipboard integration.
The code block feature.
The Enter key feature.
Easy Image with CKEditor Cloud Services feature.
The font size and font family features.
The heading feature.
The highlight feature (markers and pens).
The horizontal rule feature.
The image feature. Supports image styles, captioning, upload, resizing, and more.
The indentation (of lists and blocks) feature.
The link feature.
The numbered and bulleted lists feature.
The GitHub-flavored Markdown data processor.
The media embed feature.
The mention feature (autocomplete `@mentions`, `#tags`, etc.).
The page break feature.
The paragraph feature.
The Paste from Office (Word, Excel, Google Docs, etc.) plugin.
The remove format feature.
The restricted editing feature.
The «select all» feature.
The special characters feature.
The table feature.
The typing and deleting features.
The undo feature.
The word count feature.

Editors

Name Version Description
The classic editor implementation.
The inline editor implementation.
The balloon editor (Medium-like) implementation.
The editor implementation with a decoupled UI.

Working with the ckeditor4 repostiory

Attention: The code in this repository should be used locally and for development purposes only. We do not recommend using it in a production environment because the user experience will be very limited.

Code installation

There is no special installation procedure to install the development code. Simply clone it to any local directory and you are set.

Available branches

This repository contains the following branches:

  • – Development of the upcoming minor release.
  • – Development of the upcoming major release.
  • – Latest stable release tag point (non-beta).
  • – Latest release tag point (including betas).
  • (e.g. , ) – Release freeze, tests and tagging. Hotfixing.

Note that both and are under heavy development. Their code did not pass the release testing phase, though, so it may be unstable.

Additionally, all releases have their respective tags in the following form: , , etc.

Code structure

The development code contains the following main elements:

  • Main coding folders:
    • – The core API of CKEditor 4. Alone, it does nothing, but it provides the entire JavaScript API that makes the magic happen.
    • – Contains most of the plugins maintained by the CKEditor 4 core team.
    • – Contains the official default skin of CKEditor 4.
    • – Contains some developer tools.
    • – Contains the CKEditor 4 tests suite.

Building a release

A release-optimized version of the development code can be easily created locally. The script can be used for that purpose:

A «release-ready» working copy of your development code will be built in the new folder. An Internet connection is necessary to run the builder, for the first time at least.

Фильтры в CKEditor

Что такое фильтры, зачем они нужны и как их настраивать описано в статье про TinyMCE. Кроме дефолтных фильтров можно поставить дополнительные, например HTML Purifier. Как видно из описания этот фильтр удаляет вредоносный код и делает HTML мягким и шелковистым. Для работы модуля нужна библиотека HTML Purifier. Распаковывать библиотеку можно как в папку sites/all/libraries так и в папку с модулем. Все подробности на странице с модулем или в ридмике.

После подключения модуля в настройках текстового формата появятся два новых фильтра. Для некоторых настроек достаточно выбрать да/нет а для некоторых нужно прописывать условия вручную. Узнать как правильно записать условие можно кликнув по названию настройки. HTML Purifier отличается от стандартных фильтров Drupal. Например разрешив тег <img> вы не сможете вставить картинку. Оказывается что кроме тега нужно ещё разрешить его атрибут src. В настройках HTML в поле Allowed записать Теперь можете смело добавлять картинки с альтами и тайтлами. По умолчанию HTML Purifier пропускает некоторые теги но, как только вы добавили хотя бы одно правило, установки по умолчанию отключаются.

HTML Purifier после подключения добавляет два фильтра. Для тонкой настройки лучше выбрать расширенную (advanced) версию, для быстрой и простой настрой настройки — обычную. Не нужно включать одновременно две версии.

Как я уже говорил HTML Purifier проверяет HTML на валидность и в случае не соответствия стандартам исправляет. Вроде бы полезная функция но вот картинки вставленные через <picture> он не пропустит.


С этим читают