CKEditor это готовый для использования текстовый рекдактор HTML, созданный для упрощения создания содержания веб страниц. Это WYSIWYG редактор который предоставляет функции редактирования текста непосредственно вашим веб страницам.
CKEditor это приложение с открытым исходным кодом, то есть оно может быть измнено по вашему желанию. Его полезность приходит от активного общества, которое не прекращает развитие приложений с бесплатными add-ons и прозрачным процессом развития (transparent development process).
3- Download CKEditorУ вас есть 4 варианта скачивания CKEditor .
Результат скачивания:
Можете посмотреть примеры CKEditor в папке samples :
4- Базовые примеры:Все примеры данной статьи содержатся в папке samples в CKEditor который вы скачали. Но я попытаюсь сделать это легче чтобы вам далось легче.
Создать папку myexamples , примеры данной статьи будут находиться в этой папке.
4.1- Заменить элементы Textarea используя JavaScriptПростой пример использование CKEditor.replace(..) чтобы заменить через CKEditor .
replacebycode.html
Replace Textarea by Code Replace Textarea Elements Using JavaScript Code
Hello CKEditor
CKEDITOR.replace("editor1");Смотрите пример:
Результаты запуска примера:
4.2- Заменить элементы textarea классом nameС имеющие атрибут name, и class ="ckeditor" будет автоматически заменен CKEditor-ом .
Text
replacebyclass.html
Replace Textareas by Class Name Replace Textarea Elements by Class Name
Hello CKEditor
Запуск примера:
4.3- Создать CKEditor с jQueryПример создания CKEditor используя JQuery .
jQuery Adapter — CKEditor Sample $(document).ready(function() { $("#editor1").ckeditor(); }); function setValue() { $("#editor1").val($("input#val").val()); } Create Editors with jQuery
Hello CKEditor
{ config.LoadConfig(); }); //определяем конфигурацию для каждого отдельного запроса //создаем экземпляр коннектора var connector = connectorBuilder.Build(connectorFactory); //добавляем коннектор в pipeline app.UseConnector(connector); } } }На этом настройка серверной части завершена. Теперь интегрируем CKFinder-клиент с CKEditor на странице.
@using (Html.BeginForm("Index", "Home", FormMethod.Post)) { } document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor(editor); });
Если все скрипты подключены правильно и на стороне сервера коннектор настроен, то мы получим доступ к файловой системе через CKFinder из браузера пользователя.
В зависимости от настроек коннектора в файле Web.config мы можем менять разрешения на манипуляции с файлами и папками (создание, перемещение и т.д.).
Отмечу, что мы рассмотрели только базовую конфигурацию CKFinder. В дополнение к этому можно прикрутить логирование, кэширование файлов, различные плагины (например, добавлять водяной знак к загруженным изображениям) и т.д. Более подробно об этом можно почитать в официальной документации.
Table of contentsWhen creating an editor in your page, it is possible to set up configurations that change many of its aspects. For example:
ClassicEditor .create(document .querySelector("#editor" ), { toolbar : [ "heading" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ], heading : { options : [ { model : "paragraph" , title : "Paragraph" , class : "ck-heading_paragraph" }, { model : "heading1" , view : "h1" , title : "Heading 1" , class : "ck-heading_heading1" }, { model : "heading2" , view : "h2" , title : "Heading 2" , class : "ck-heading_heading2" } ] } }) .catch(error =>
As you can see, configurations are set by a simple JavaScript object passed to the create() method.
Removing featuresBuilds come with all features included in the distribution package enabled by default. They are defined as plugins for CKEditor.
In some cases, you may need to have different editor setups in your application, all based on the same build. For that purpose, you need to control the plugins available in the editor at runtime.
In the example below Heading and Link plugins are removed:
// Remove a few plugins from the default setup. ClassicEditor .create(document .querySelector("#editor" ), { removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] }) .catch(error => { console .log(error); });Be careful when removing plugins from CKEditor builds using config.removePlugins . If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration as in the example above.
List of pluginsEach build has a number of plugins available. You can easily list all plugins available in your build:
ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);
Adding features Adding complex featuresAs CKEditor builds do not include all possible features, the only way to add more features to them is to create a custom build .
Adding simple (standalone) featuresThere is an exception to every rule. Although it is impossible to add plugins that have dependencies to @ckeditor/ckeditor5-core or @ckeditor/ckeditor5-engine (that includes nearly all existing official plugins) without rebuilding the build, it is still possible to add simple, dependency-free plugins.
import ClassicEditor from "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) { editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) { // ... }; } // Load the custom upload adapter as a plugin of the editor. ClassicEditor .create(document .querySelector("#editor" ), { extraPlugins : [ MyUploadAdapterPlugin ], // ... }) .catch(error => { console .log(error); }); Toolbar setupIn builds that contain toolbars an optimal default configuration is defined for it. You may need a different toolbar arrangement, though, and this can be achieved through configuration.
Each editor may have a different toolbar configuration scheme, so it is recommended to check its documentation. In any case, the following example may give you a general idea:
ClassicEditor .create(document .querySelector("#editor" ), { toolbar : [ "bold" , "italic" , "link" ] }) .catch(error => { console .log(error); });
The above is a strict UI-related configuration. Removing a toolbar item does not remove the feature from the editor internals. If your goal with the toolbar configuration is to remove features, the right solution is to also remove their respective plugins. Check above for more information.
Listing available itemsYou can use the following snippet to retrieve all toolbar items available in your editor:
Array .from(editor.ui.componentFactory.names());CKEditor 4 - WYSIWYG редактор статей. Он позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.
ИнтерфейсРисунок 1. Окно редактора
В окне WYSIWYG редактора находятся следующие панели кнопок:
Переключение режима просмотра | |
Печать и выбор шаблона статьи | |
Работа с буфером обмена (вырезать, копировать, вставить, отменить) | |
Поиск и замена | |
Создание форм | |
Вставка спойлеров (сворачиваемого текста) и разрывов страниц | |
Изменение стиля текста | |
Форматирование абзацев | |
Вставка ссылок | |
Вставка медиа-контента сторонних сайтов | |
Вставка объектов | |
Выбор стиля форматирования | |
Выбор форматирования абзаца | |
Выбор шрифта | |
Выбор размера шрифта | |
Выбор цвета текста или фона | |
Проверка орфографии | |
Дополнительные возможности просмотра (отобразить блоки и развернуть) |
В нижней панели окна редактора содержится информация о текущем теге и статистика текста:
В панели переключения режимов просмотра редактора находятся кнопки:
В панели печати и выбора шаблона статьи находятся следующие кнопки:
Печать статьи на принтере. После нажатия на данную кнопку откроется стандартное диалоговое окно с предложением выбрать принтер и отправить на печать текст статьи. | |
Выбор шаблона статьи:
|
В редакторе доступны следующие операции по работе с буфером обмена:
Кнопка «Вырезать». Вырезает выделенный фрагмент статьи и помещает его в буфер обмена. | |
Кнопка «Копировать». Копирует выделенный фрагмент статьи и помещает его в буфер обмена. | |
Кнопка «Вставить». Вставляет в статью содержимое буфера обмена. Если текст вставляется из внешних приложений, например, MS Office, при вставке будут включены все теги, связанные с форматированием. Большая часть данных тегов является лишней и должна быть удалена, что затрудняет редактирование статьи. Поэтому данной кнопкой рекомендуется пользоваться только для вставки неформатированных текстов. | |
Кнопка «Вставить только текст». Аналогична кнопке «Вставить». При вставке фрагмента статьи из буфера обмена его форматирование полностью удаляется. | |
Кнопка «Вставить из Word». Аналогично кнопке «Вставить». Используется, если требуется сохранить форматирование вставляемого фрагмента. При вставке оптимальным образом сохраняется внешний вид текста и удаляется ненужное форматирование. Рекомендуется использовать при копировании текста из MS Word или других приложений MS Office. | |
Кнопка «Отменить». Используется для отмены последнего выполненного изменения. | |
Кнопка «Повторить». Используется для возврата последнего отмененного изменения. |
В панели поиска и замены находятся следующие кнопки:
При нажатии на кнопку «Найти» открывается окно поиска:
В поле «Найти» вводится искомый фрагмент текста.
Доступны следующие опции:
Для выполнения поиска необходимо ввести искомый фрагмент, включить требуемые опции поиска и нажать кнопку «Найти». Редактор выполнит поиск и выделит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Найти» редактор будет выполнять поиск далее по тексту и выделять очередной найденный фрагмент.
ЗаменаПри нажатии на кнопку «Заменить» открывается окно замены фрагмента текста:
В поле «Найти» вводится искомый фрагмент текста. В поле «Заменить на» текст, на который требуется заменить искомый фрагмент.
Доступны следующие опции:
Для выполнения замены необходимо заполнить поля «Найти» и «Заменить на», включить требуемые опции поиска и нажать кнопку «Заменить» или «Заменить все». При нажатии на кнопку «Заменить» редактор выполнит поиск и заменит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Заменить» редактор будет выполнять поиск далее по тексту и заменять очередной найденный фрагмент.
При нажатии на кнопку «Заменить все» редактор сразу выполнит поиск и замену требуемого фрагмента по всему тексту статьи.
Формы предназначены для ввода данных пользователем в окне браузера, передаче их обработчику и, при необходимости, вывода результатов обработки. Например: форма регистрации пользователя, форма обратной связи и т.д.
В панели создания форм находятся следующие кнопки:
Кнопка «Форма». Используется для вставки формы в статью. В HTML-коде форме соответствует тег form . | |
Кнопка «Чекбокс». Используется для вставки чекбоксов (флаговых кнопкок, галочек) в форму или в статью. | |
Кнопка «Радиокнопка». Используется для вставки радиокнопок (переключателей) в форму или в статью. | |
Кнопка «Текстовое поле». Используется для вставки однострочного поля для ввода текста. | |
Кнопка «Многострочное текстовое поле». Используется для вставки многострочного поля для ввода текста. | |
Кнопка «Выпадающий список». Используется для вставки выпадающего списка. | |
Кнопка «Кнопка». Используется для вставки кнопки в форму или в статью. | |
«Кнопка-изображение». Используется для вставки изображения, используемого в качестве кнопки. | |
Кнопка «Скрытое поле». Используется для вставки скрытого поля в форму или в статью. |
При нажатии на кнопку «Форма» открывается окно настроек новой формы.
В окне настроек формы находятся следующие поля:
Имя | Произвольное имя формы. В HTML-коде – параметр name. |
Действие | URL-адрес программы или документа, который обрабатывает данные, введенные в форму. В HTML-коде – параметр action. |
Идентификатор | Уникальный идентификатор формы. В HTML-коде – параметр id. |
Кодировка | Выбор способа кодирования данных формы. В HTML-коде – параметр enctype. Доступные значения:
|
Цель | Выбор окна или фрейма, в который обработчик данных формы будет выводить результаты обработки. В HTML-коде – параметр target. Доступные значения:
|
Метод | Выбор используемого метода HTTP-запроса. В HTML-коде – параметр method. Доступные значения:
|
Чекбокс предназначен для отображения элементов управления, которые включают или выключают какое-либо свойство или опцию. Такой элемент может принимать одно из двух значений: да или нет. В HTML-коде данному элементу соответствует тег input type="checkbox" . При нажатии на кнопку «Чекбокс» открывается окно настроек нового элемента.
В окне настроек элемента «Чекбокс» находятся следующие поля:
Элемент «Радиокнопка» предназначен для отображения группы значений с возможностью выбора только одного из них. Т.е. элементы в пределах группы являются взаимоисключающими. Каждый элемент может принимать одно из двух значений: да или нет. В HTML-коде данному элементу соответствует тег input type="radio" . При нажатии на кнопку «Радиокнопка» открывается окно настроек нового элемента.
В окне настроек элемента «Радиокнопка» находятся следующие поля:
Элемент «Текстовое поле» предназначен для ввода текстовой строки пользователем. В HTML-коде данному элементу соответствует тег input type="text" . При нажатии на кнопку «Текстовое поле» открывается окно настроек нового поля.
Доступные типы содержимого:
Элемент «Многострочное текстовое поле» предназначен для ввода пользователем текста, состоящего из нескольких строк. В HTML-коде данному элементу соответствует парный тег textarea . При нажатии на кнопку «Многострочное текстовое поле» открывается окно настроек нового поля.
В окне настроек элемента «Текстовое поле» находятся следующие поля:
Элемент «Выпадающий список» предназначен для отображения списка множественного выбора или выпадающего списка. В HTML-коде данному элементу соответствует парный тег select . Элементам списка соответствует парный тег option . При нажатии на кнопку «Выпадающий список» открывается окно настроек нового списка.
В окне настроек списка множественного выбора находятся следующие поля:
Группа параметров «Доступные варианты»:
Завершение статьи следует…
→ WYSIWYG CKeditor
Наверняка многие разработчики как минимум слышали о существовании HTML - редакторов, встраиваемых в веб страницы. Хочу представить Вам пожалуй самый продвинутый на сегодняшний день WYSIWYG . Для непосвященных опишу в двух словах о чем идет речь. Если Вы или Ваши клиенты хотите своими руками редактировать контент сайта, а познавать основы html нет времени или желания - то Ckeditor то что нужно.
Ранее продукт назывался FCKeditor , но из-за нездоровых ассоциаций у англичан связанных с аббревиатурой FCK (создатель проекта Frederico Calderia Knabben ), редактор был переименован в Ckeditor . Кроме названия в новой версии исчезли api для работы с файлами на perl и python , по крайней мере в бесплатном дистрибутиве. Разработчики предлагают несколько тарифных планов по поддержке и возможно на этих условиях вам предоставят не только их. На данный момент по умолчанию есть asp и php . Я же в своей работе использую perl и буду писать интерфейс сам. Позже выложу. А в целом проект имеет плагинную архитектуру, которой довольно легко управлять если разбираетесь в JS .
Скачать WYSIWYG ckeditor можно здесь или на сайте www.ckeditor.com .
Так он собственно выглядит. Правда я вам представил немного урезанную версию, но от полного комплекта почти не отличается.
Подключение и настройка ckeditor Подключение по умолчаниюПодключается и настраивается ckeditor очень легко.
1 . Скачиваем ckeditor и распаковываем в корень сайта, CMS или другой системы. Разработчики не рекомендуют начинающим программистам переименовывать каталоги и файлы во избежание конфликтов в редакторе. Если все оставить как есть то запуск по умолчанию - минутное дело.
2 .В коде страницы грузим основной код и вставляем элемент textarea . Причем элементов textarea может быть несколько, главное им назначить разные идентификаторы.
3 .Инициализация на Ваш вкус, но лучше делать после того как объектная модель документа будет готова.
Для Jquery :
$.noConflict(); jQuery(document).ready(function($) { CKEDITOR.replace("textID",{}); });
Для Ext JS :
Ext.onReady(CKEDITOR.replace("textID",{}));
Древний способ:
Или непосредственно перед закрывающим тегом
CKEDITOR.replace("textID",{});
Дополнительная настройкаДля изменения настроек по умолчанию в ckeditor предусмотрен некоторого рода конфигурационный файл config.js , который лежит по адресу /ckeditor/config.js . Он содержит в себе настроечный хеш.
Вот пример того который используется для демо версии на данной странице:
CKEDITOR.editorConfig = function(config) { config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = false; config.height = 200; config.removePlugins = "resize,about,save"; };
config.skin - интерфейс. Возможны три варианта: kama , v2 , office2003 . По умолчанию kama .
config.uiColor - цвет интерфейса. Работает только для kama .
config.language - Язык интерфейса.
config.fullPage - оплетка для редактируемого документа. Если установлено true то редактируемая область будет содержать полноценный html документ, если false - только контент.
config.height - высота редактируемой области в пикселах. Аналогично для ширины.
config.removePlugins - Список кнопок (плагинов), которые нужно отключить. Например: resize - это благодаря которой область редактора можно растянуть как угодно, удерживая мышью нижний правый угол, save - кнопка сохранить.