Свързване на ckeditor. Инсталиране на визуалния редактор CKEditor. Преобразувайте елемент във вградения редактор с помощта на код

CKEditor 4 - WYSIWYG редактор на статии. Тя ви позволява да извършвате гъвкаво форматиране на текст, включително работа със стилове, списъци, връзки, графики и др.

Фигура 1. Прозорец на редактора

Прозорецът на редактора WYSIWYG съдържа следните панели с бутони:

	Превключване на режима на гледане
	Отпечатване и избор на шаблон на статия
	Работа с клипборда (изрязване, копиране, поставяне, отмяна)
	Търсене и замяна
	Създаване на формуляри
	Вмъкване на спойлери (сгъваем текст) и прекъсвания на страници
	Промяна на стила на текста
	Форматиране на абзаци
	Вмъкване на връзки
	Вмъкване на медийно съдържание от сайтове на трети страни
	Вмъкване на обекти
	Избор на стил на форматиране
	Изберете форматиране на абзац
	Избор на шрифт
	Избор на размер на шрифта
	Избор на текст или цвят на фона
	Проверка на правописа
	Допълнителни опции за преглед (показване на блокове и разширяване)

Долният панел на прозореца на редактора съдържа информация за текущия маркер и статистика на текста:

Панелът за превключване на режимите на преглед на редактора съдържа следните бутони:

Панелът за избор на шаблон за печат и статия съдържа следните бутони:

В редактора са налични следните операции за работа с клипборда:

Панелът за намиране и замяна съдържа следните бутони:

Когато щракнете върху бутона „Намери“, се отваря прозорец за търсене:

В полето „Намиране“ въведете желания фрагмент от текст.

Налични са следните опции:

• В целия текст. Ако опцията е активирана, тогава при достигане на края на статията търсенето ще продължи от началото. Ако опцията е деактивирана, търсенето ще приключи при достигане на края на статията.

За да извършите търсене, трябва да въведете фрагмента, който търсите, да активирате необходимите опции за търсене и да щракнете върху бутона „Намери“. Редакторът ще извърши търсене и ще маркира първия намерен фрагмент в текста на статията. Всеки път, когато натиснете отново бутона „Намери“, редакторът ще търси по-нататък в текста и ще маркира следващия намерен фрагмент.

Когато щракнете върху бутона „Замяна“, се отваря прозорец за замяна на текстов фрагмент:

В полето „Намиране“ въведете желания фрагмент от текст. В полето „Замени с“ текстът, с който искате да замените търсения фрагмент.

Налични са следните опции:

• Различаващ главни от малки букви. Ако опцията е активирана, търсенето ще вземе предвид регистъра на буквите на търсения фрагмент.
• Само цялата дума. Ако опцията е активирана, редакторът ще търси въведения фрагмент като цяла дума. Резултатите от търсенето няма да включват думи, за които въведеният фрагмент е част.
• В целия текст. Ако опцията е активирана, тогава при достигане на края на статията търсенето ще продължи от началото. Ако опцията е деактивирана, търсенето ще приключи при достигане на края на статията.

За да извършите замяна, трябва да попълните полетата „Намиране“ и „Замяна с“, да активирате необходимите опции за търсене и да щракнете върху бутона „Замяна“ или „Замяна на всички“. Когато щракнете върху бутона „Замяна“, редакторът ще търси и замени първия намерен фрагмент в текста на статията. Всеки път, когато щракнете отново върху бутона „Замяна“, редакторът ще търси по-нататък в текста и ще замени следващия намерен фрагмент.
Когато щракнете върху бутона „Замяна на всички“, редакторът незабавно ще търси и замени необходимия фрагмент в целия текст на статията.

Формулярите са предназначени за потребителя да въвежда данни в прозорец на браузъра, да ги прехвърля към процесора и, ако е необходимо, да показва резултатите от обработката. Например: формуляр за регистрация на потребител, формуляр за обратна връзка и др.

Панелът за създаване на формуляр съдържа следните бутони:

Когато щракнете върху бутона „Формуляр“, се отваря прозорецът с настройки за новата форма.

Прозорецът с настройки на формуляра съдържа следните полета:

Квадратчето за отметка е предназначено да показва контроли, които активират или деактивират свойство или опция. Такъв елемент може да приеме една от двете стойности: да или не. В HTML кода този елемент съответства на тага input type="checkbox". Когато щракнете върху бутона „Квадратче за отметка“, се отваря прозорецът с настройки за новия елемент.

Прозорецът с настройки за елемента „Checkbox“ съдържа следните полета:

• Име - произволно име на елемента. В HTML код – параметърът име;
• Стойност - действа като уникален идентификатор за елемента. В HTML код – параметърът стойност;
• Избрано - ако опцията е активирана, тогава по подразбиране този елемент ще бъде маркиран.

Елементът „Радио бутон“ е предназначен да показва група от стойности с възможност за избор само на една от тях. Тези. елементи в рамките на една група са взаимно изключващи се. Всеки елемент може да приеме една от две стойности: да или не. В HTML кода този елемент съответства на тага input type="radio". Когато щракнете върху бутона „Радио бутон“, се отваря прозорецът с настройки за новия елемент.

Прозорецът с настройки за елемента „Радио бутон“ съдържа следните полета:

• Елементите в една група трябва да имат едно и също име.
• Стойност - действа като уникален идентификатор за елемента. В HTML кода – параметърът стойност.
• Избрано - ако опцията е активирана, тогава по подразбиране този елемент ще бъде маркиран. В рамките на група това свойство трябва да бъде разрешено само за един елемент. Ако е активиран за няколко елемента, тогава ще бъде маркиран само последният.

Елементът „Текстово поле“ е предназначен за въвеждане от потребителя на текстов низ. В HTML кода този елемент съответства на тага input type="text". Когато щракнете върху бутона „Текстово поле“, се отваря прозорецът с настройки за новото поле.

• Име - произволно име на елемента. В HTML кода – параметърът име.
• Стойност - Съдържа текста, който ще се показва в текстовото поле по подразбиране. В HTML кода – параметърът стойност.
• Ширина на полето (в символи) - дължината на областта за въвеждане на текстовото поле в символи. В HTML кода – параметърът размер.
• Макс. брой символи - максималната дължина на низа, който може да бъде въведен в текстовото поле, в символи. В HTML кода – параметърът maxlength.
• Тип съдържание - Типът съдържание на текстовото поле. В HTML код – параметър тип. Преди изпращане на данни към сървъра, те се проверяват, за да се гарантира, че съответстват на посочения тип.

Налични типове съдържание:

• Имейл – текстовото поле съдържа имейл адреса;
• Парола – текстовото поле съдържа паролата;
• Търсене – текстовото поле е предназначено за въвеждане на търсения текст;
• Телефонен номер – текстовото поле съдържа телефонен номер;
• Текст – текстовото поле съдържа редовен ред;
• Връзка – текстовото поле съдържа URL адреса.

Елементът „Многоредово текстово поле“ е предназначен за въвеждане от потребителя на текст, състоящ се от няколко реда. В HTML кода този елемент съответства на сдвоен таг textarea. Когато щракнете върху бутона „Многоредово текстово поле“, се отваря прозорецът с настройки за новото поле.

Прозорецът с настройки за елемента „Текстово поле“ съдържа следните полета:

• Име - произволно име на елемента. В HTML кода – параметърът име.
• Колони - ширина на полето в символи. В HTML кода – параметърът cols.
• Редове - височина на полето в редове. В HTML кода – параметърът rows.
• Стойност - Съдържа текста, който ще се показва в текстовото поле по подразбиране.

Елементът падащ списък е проектиран да показва списък с множество възможности за избор или падащ списък. В HTML кода този елемент съответства на сдвоен маркер за избор. Елементите на списъка имат сдвоен таг за опция. Когато щракнете върху бутона „Падащ списък“, се отваря прозорецът с настройки за новия списък.

Прозорецът за настройки на списъка с множество избори съдържа следните полета:

• Име - произволно име на елемента. В HTML кода – параметърът име.
• Стойност - съдържа стойността на елемента от списъка, който е избран по подразбиране. В HTML кода за този елемент етикетът с опции е зададен на selected="selected" .
• Размер - височината на показаната област на списъка в редове. Ако размерът е равен на единица, ще се покаже падащ списък. Ако размерът не е посочен, изгледът на списък ще зависи от опцията Разрешаване на множество селекции.

Група параметри „Налични опции“:

• Текст - поле за въвеждане на показвания текст на елемента от списъка. Въвежда се заедно с полето „Стойност“. За да добавите двойка „Текст – Стойност“ към списъка, щракнете върху бутона „Добавяне“.
• Стойност - поле за въвеждане на стойността на елемента от списъка, изпратен до сървъра. Въвежда се заедно с полето „текст“. За да добавите двойка „Текст – Стойност“ към списъка, щракнете върху бутона „Добавяне“.
• Добавяне - бутон за добавяне на въведената двойка “Текст – Стойност” към списъка.
• Редактиране - бутон за промяна на избрания елемент от списъка. За да промените, трябва да изберете необходимия елемент в настройките на списъка, да редактирате съдържанието на полетата „Текст“ и „Стойност“ и да щракнете върху бутона „Промяна“. Избраният елемент ще бъде съответно актуализиран.
• Повдигане - бутон за преместване на избрания елемент от списъка едно ниво по-високо.
• Надолу - бутон за преместване на избрания елемент от списъка с едно ниво по-надолу.
• Маркиране като избрано - когато щракнете върху бутона, избраният елемент от списъка става маркиран като избран по подразбиране. Стойността на елемента се показва в полето "Стойност" (виж по-горе). В HTML кода за този елемент етикетът с опции е зададен на selected="selected" .
• Изтриване - бутон за изтриване на избрания елемент от списъка.
• Разрешаване на множествен избор - ако свойството е активирано, тогава с помощта на клавиша ctrl можете да изберете няколко елемента от списъка. Ако размерът на списъка не е посочен и свойството е деактивирано, ще се покаже падащ списък. Ако размерът на списъка не е посочен и свойството е активирано, тогава размерът на списъка е зададен на четири.

Краят на статията следва...

Официална страница за разработчици: https://ckeditor.com/

CKEditor е много популярен визуален WYSIWYG HTML редактор на съдържание днес.

CKFinder е файлов мениджър, който ви позволява достъп до файловата система на сървъра и управление на файлове от браузъра на клиента.

Обикновено и двата компонента се събират заедно, тоест файловият мениджър е интегриран в редактора.

CKEditor се предлага в две версии. Версия 4 е по-стара и следователно по-разпространена. И версия 5, нова, реализираща модулна архитектура, с много иновации.

Използвам версия 4 в моите проекти, нейната функционалност е напълно достатъчна за решаване на всякакви проблеми. Нека изтеглим архива с редактора и го добавим към нашия проект.

Добавянето на CKEditor е много лесно. Това се случва на няколко етапа:

) document.addEventListener("DOMContentLoaded", функция (събитие) ( var editor = CKEDITOR.replace("content1"); ));

Всичко е готово! В горния пример CKEditor се свързва с текстовата област "content1" в HTML формуляр. След това съдържанието на това поле ще бъде изпратено до сървъра.

Струва си да се отбележи, че има много добавки за CKEditor, които разширяват стандартната му функционалност. Можете също така сами да пишете плъгини (този процес е описан по-подробно в официалната документация на уебсайта). Нека добавим плъгин към редактора, който ви позволява да вграждате видео от Youtube видео хостинг на страницата.

Към момента на писане, всички добавки могат да бъдат намерени в отделен раздел на сайта. Плъгинът, който ни интересува, се намира на: https://ckeditor.com/cke4/addon/youtube

След това в лентата с инструменти на редактора ще се появи нов бутон, който ви позволява да работите с новия плъгин.

Сега нека разгледаме файловия мениджър CKFinder. Тъй като нашите файлове (например снимки) се намират на сървъра, в допълнение към свързването на този компонент на клиента, тоест в браузъра на потребителя, ще трябва да го конфигурираме и от страната на сървъра и специално да свържем някои библиотеки и прилагайте няколко метода.

Официалната документация за настройка на конектор за ASP.NET приложения се намира на: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

За разлика от редактора CKEditor, който конфигурирахме на уебсайта и изтеглихме ръчно, можем да добавим CKFinder към проекта директно във Visual Studio чрез . Минималният набор от пакети, необходими за работа, изглежда така:

След като инсталирате всички необходими компоненти, можете да започнете да настройвате сървърната страна.

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

За да направим това, трябва да внедрим специален интерфейс, а в него метод, който удостоверява всички входящи заявки.

CKFinderAuthenticator.cs

Публичен клас CKFinderAuthenticator: IAuthenticator ( public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) ( var user = new User(true, new List()); return Task.FromResult((IUser) user); ) )

В примера по-горе ние просто връщаме фалшив потребител всеки път, който винаги е удостоверен (true флаг) и няма роли (празен лист). Тоест винаги имаме права за достъп до файловата система. В реален проект, разбира се, този въпрос трябва да се подходи по-сериозно и този метод трябва да се комбинира със съществуващата система за удостоверяване и оторизация на потребителите.

Пространство от имена CKEditor ( public class Startup ( public void Configuration(IAppBuilder app) ( // регистрирайте файловата система за конектора FileSystemFactory.RegisterFileSystem(); // декларирайте маршрут в приложението и го картографирайте към конектора // клиента CKFinder JS библиотеката очаква да види конектора по този маршрут app.Map("/ckfinder/connector", SetupConnector); ) //декларира метод за настройка и инициализиране на конектора private static void SetupConnector(IAppBuilder app) ( //създаване на екземпляри на необходимите класове var connectorFactory = new OwinConnectorFactory(); var connectorBuilder = new ConnectorBuilder(); var customAuthenticator = new CKFinderAuthenticator(); connectorBuilder .LoadConfig() //зареждане на конфигурацията от файла Web.config .SetAuthenticator(customAuthenticator) // задайте предварително дефинирания authenticator.SetRequestConfiguration((request, config) = > ( config.LoadConfig(); )); //дефинирайте конфигурацията за всяка отделна заявка //създайте екземпляр на конектора var connector = connectorBuilder.Build(connectorFactory ); //добавете конектор към тръбопровода app.UseConnector(connector); ) ) )

Това завършва конфигурацията на сървърната част. Сега интегрираме клиента CKFinder с CKEditor на страницата.

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) ( ) document.addEventListener("DOMContentLoaded", функция (събитие) ( var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor (редактор); ));

Ако всички скриптове са свързани правилно и конекторът е конфигуриран от страна на сървъра, тогава ще имаме достъп до файловата система чрез CKFinder от браузъра на потребителя.

В зависимост от настройките на конектора във файла Web.config, можем да променим разрешенията за манипулиране на файлове и папки (създаване, преместване и т.н.).

Моля, обърнете внимание, че разгледахме само основната конфигурация на CKFinder. В допълнение към това можете да добавите регистриране, кеширане на файлове, различни добавки (например добавяне на воден знак към изтеглени изображения) и др. Можете да прочетете повече за това в официалната документация.

Drupal 7, подобно на шестата версия, няма вграден визуален редактор.

В Drupal 7, както и в шестата версия, трябва да инсталираме редактор. Разбира се, не е нужно да правите това и да пишете текстове, виждайки само кода. Но харесвам визуалните редактори. Позволете ми да ви напомня, че изучавахме инсталацията и конфигурацията за Drupal 6 в урок 2:

Днес ще разгледаме работещата комбинация от cms и редактор.
drupal 7.17
CKEditor - WYSIWYG HTML редактор 7.x-1.11
CKEditor 4.0
elFinder файлов мениджър 7.x-0.7
сценарий elFinder - elfinder-1.2

За Drupal версия 7 целият процес на инсталиране и конфигуриране е много по-прост. Не е необходимо да редактирате нищо във файловете, всички действия са достъпни от администраторския панел (ще поставим отметки в квадратчетата). Съществуващите текущи версии на модули правят живота ни много по-лесен.

CKEditor е гъвкав и лесен за употреба редактор. Интерфейсът му наподобява Word.
Първо инсталираме скрипта на редактора, след това самия модул. Това е модулът, който ще го свърже със сайта.
Забележка.
Посочвам конкретни версии към момента на писане.

1. Изтеглете модула ]]> https://drupal.org/project/ckeditor ]]>
Разопаковайте архива в папка сайт/всички/модули. Целият път изглежда така: сайт/всички/модули/ckeditor

2. Изтеглете редактора CKEditor 4.0]]> https://ckeditor.com/download ]]>
За файлове за редактор трябва да създадете папка с библиотеки сайт/всички/
Пътят за разопаковане на архива ще бъде така: сайт/всички/библиотеки/ckeditor

На страницата с модули го активираме и след това го конфигурираме.
Отидете на „Конфигурация - CKEditor - Глобален профил на CKEditor - Редактиране“. Тук трябва да проверите записа в полето „Път към CKEditor“ - трябва да бъде %l/ckeditor. Този запис показва, че редакторът се намира в папката библиотеки.

Всичко. Инсталирал си CKEditor и трябва да работи. За да проверите, опитайте да отворите страницата за създаване на нов материал. Сега, вместо едно голямо поле за въвеждане, ще видите обичайния визуален редактор.

Ако редакторът не се вижда:
Проверете дали избраните версии на модула са правилни за вашата версия на Drupal. Опитайте да смените с друга версия.

1 стъпка. Настройване на разширения профил в редактора на CKEditor.
Разширени (разширени, със зареждане на изображения и т.н.)
Отидете на „Управление > конфигурация > ckeditor - admin/config/content/ckeditor
Нека настроим разширения профил, щракнете върху връзката „промяна“ до разширения профил.
Външен вид на редактора:
Изберете цвят.

Плъзнете и пуснете необходимите бутони.

Изберете език руски.

Настройки на файловия браузър
Избираме файлов мениджър по наш вкус, по-долу в текста има инсталиране и конфигурация на файлов мениджър за Drupal 7 – Elfinder.

Стъпка 2. Настройване на пълния профил в редактора на ckeditor
Отидете на "Управление - конфигурация - ckeditor" - admin/config/content/ckeditor
Можете да оставите настройките по подразбиране и да изберете руски.

Най-лесният вариант е да използвате Full (пълен) и Advanced (разширен) - за регистрираните също и вашите варианти. Създайте обикновен профил за анонимни потребители, където можете да маркирате автоматичната промяна на html текст в прост формат.

Малко от ревюто на Drupal 7, такова мини положително ревю.
По подразбиране седмицата има поле за качване на снимки. Много полезна функция. Към всеки материал може да бъде присвоена картинка – своеобразно лого. В съобщението тази снимка автоматично ще бъде намалена по размер.

За да направите това, проверете коя версия сте изтеглили на https://ckeditor.com/download

• В основния пакет има няколко бутона.
• Стандартен пакет - има повече от тях.
• Пълният комплект е в Пълния пакет - изтеглете го, ако искате да извлечете максимума от него.

Комбинацията от редактор и файлов мениджър ще направи работата ви по-приятна. Можете да вмъкнете изображение навсякъде от сървъра или от вашия компютър. Задайте му необходимите атрибути и алтернативно описание. За съжаление, той също трябва да бъде инсталиран.
Файловият мениджър CKEditor ще изтегли не само снимки, но и други файлове.
Както при редактора, трябва да изтеглите модула и скрипта.

Разопаковайте архива и поставете файловете в папката site/all/modules/elfinder

От последните версии се получи elfinder-1.2.
След това разопаковайте архива и поставете файловете в папката site/all/libraries/elfinder
Тук има малка функция, папката трябва да се нарича elfinder.

В „Главната директория“ оставяме избора за „Използване на системните настройки по подразбиране“ - по подразбиране в Drupal.

Настройки по подразбиране admin/config/media/file-system:

На страницата „Съдържание“ - администратор/съдържание, ще видите нов раздел „Файлове“. Сега просто щракнете върху него и ще видите интерфейса на файловия мениджър.

И последната стъпка е да комбинирате редактора с файловия мениджър в един функционален инструмент.
Вече описах настройката на профили на редактор по-горе.

Повтарям:
Изберете в Тип файлов браузър - elFinder. Ако желаете, можете също да промените папката за изтегляне на файлове тук.

Сега всичко трябва да работи, но просто не разбирам защо това не е в ядрото на Drupal? Вместо това има няколко опции за редактор, които да задоволят всеки вкус. Което е твърде добро. ;)

Нова работеща връзка

drupal 7.21
CKEditor - WYSIWYG HTML редактор 7.x 1.13
CKEditor - ckeditor_4.1_standard
elFinder файлов мениджър 7.x-0.8
elFinder скрипт - elfinder-1.2

Беше открито, че бъгът се появява при вмъкване на Drupal тийзър. Ако статията не отделя съобщението, тогава няма грешка.

Причината е, че по подразбиране размерът на съобщението вече е конфигуриран в типа материал. Това води до двойно използване на разделянето на съобщенията: ръчно и автоматично.

Път за настройка на показване на реклами:

Начало » Администрация » Структура » Типове съдържание » Статия » Управление на дисплея

съвет. Когато персонализирате външния вид на визуалния редактор, трябва да премахнете бутона teaser-Drupal и в двата профила.

Статии за изучаване на drupal:

Общи понятия за начинаещи.

Как да русифицирам Drupal и неговите модули.

Селекция от блог модули.

Бързо ръководство.

CKEditor е готов за използване HTML текстов редактор, предназначен да опрости създаването на съдържание на уеб страници. Това е WYSIWYG редактор, който предоставя функции за редактиране на текст директно на вашите уеб страници.

CKEditor е приложение с отворен код, което означава, че може да бъде модифицирано по ваше желание. Полезността му идва от активна общност, която никога не спира да разработва приложения с безплатни добавки и прозрачен процес на разработка.

Имате 4 опции за изтегляне на CKEditor.

Резултат от изтегляне:

Можете да видите примери за CKEditor в папката проби:

Всички примери от тази статия се съдържат в папката пробив CKEditor, който сте изтеглили. Но ще се опитам да го улесня, за да ви е по-лесно.

Създайте папка моите примери, примерите в тази статия ще се намират в тази папка.

Прост пример е използването на CKEditor.replace(..) за замяна чрез CKEditor.

replacebycode.html

Замяна на Textarea с код Замяна на елементи на Textarea с помощта на JavaScript код

Здравей CKEditor

Вижте пример:

Резултати от изпълнението на примера:

С притежаващ атрибут име,и клас = "ckeditor" ще бъде автоматично заменен от CKEditor.

Текст

replacebyclass.html

Замяна на текстови полета по име на клас Замяна на елементи на текстово поле по име на клас

Здравей CKEditor

Изпълнение на примера:

Пример за създаване на CKEditor с помощта на JQuery.

Адаптер jQuery - Примерен CKEditor $(document).ready(function() ( $("#editor1").ckeditor(); )); функция setValue() ( $("#editor1").val($("input#val").val()); ) Създаване на редактори с jQuery

Здравей CKEditor