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

Ръководство за потребителя: как да инсталирате и конфигурирате редактора ckeditor в Drupal 7. Изтегляне на изображения от Elfinder.

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

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

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

Как да инсталирате WYSIWYG редактор CKEditor на най-новата CMS Drupal 7.17

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

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

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

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

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

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

Персонализиране на профили на CKEditor

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

Плъзнете и пуснете бутоните, които искате.

Избираме руски език.

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

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

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

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

Какви проблеми се срещат при работа с редактора

CKeditor не показва всички бутони

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

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

Инсталиране и конфигуриране на файловия мениджър Elfinder за Drupal 7

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

  1. Изтеглете модул ]]> https://drupal.org/project/elfinder ]]>

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

  1. Изтеглете скрипта ]]> ]]>

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

  1. Настройвам. За това отиваме admin/config/elfinder - "конфигурация - модули - elFinder - конфигуриране".

В "Root directory" оставяме избора за "Use system defaults" - по подразбиране в Drupal.

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

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

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

Повтарям:
Изберете в Тип файлов браузър - 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 и неговите модули.

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

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

Използвах BUEditor на моя сайт - прост удобен редактор, но не е много удобен за потребителите. Често си мислех да инсталирам CKEditor, но ми изглеждаше като някакво чудовище, но в действителност всичко се оказа не толкова страшно.

Как да инсталирате модула прочетете.

След като се свържете чрез вашия модул, на страницата admin/config/content/ckeditor/edit/profile_recognition в раздела ПОЯВА НА РЕДАКТОРА, В глава ПлъгиниЩе се появи полето за отметка за активиране. Включете, запазете, проверете.

3. Поставете връзки.Извън кутията диалоговият прозорец за вмъкване на връзки съдържа куп ненужни и неразбираеми неща. Заменяме го с плъгина Simple link. Как да инсталирате, вижте параграф 2. Ние свързваме (вижте точка 1):

Config.extraPlugins = "SimpleLink";

Ще се появи и нова икона (бутон) на плъгина.

4. Вмъкване на изображения.Тук всичко е същото като с връзките, можете да поставите плъгина Simple Image за вмъкване на изображения чрез връзка.

Config.extraPlugins = "SimpleImage";

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

Единственото нещо, което искам да добавя е, че приставката Enhanced Image изисква още две приставки Widget и Lineutils.

не можах да разбера защо плъгинът не се стартира, докато не погледнах в дневника

5. Външен вид.По подразбиране се използва кожата на Moono, но исках да доведа външния вид до външния вид на BUEditor.

така изглеждаше BUEditor

7. Поставка за място.За да добавите контейнер, инсталирайте приставката (вижте стъпка 2) Помощник за конфигурация. Ние свързваме (вижте точка 1):

Config.extraPlugins = "confighelper"; config.placeholder = "(!LANG:Нашият текст"; // текст нашего placeholder !}

8. Емотикони.Плъгинът за вмъкване на Smiley отговаря за усмивките в CKEditor "e, той е включен в стандартния пакет - Пълен пакет.

Ето как изглеждат емотиконите извън кутията:

За да ги замените със свои, трябва да посочите пътя до папката с изображения в конфигурацията (вижте стъпка 1) smiley_path :

Config.smiley_path = "/sites/default/files/smileys/";

Напишете имената на файловете (изображенията), които ще се показват smiley_images :

config.smiley_images = ["smile_1.png","smiley_2.png"];

И описание (описание при курсор) smiley_descriptions

config.smiley_descriptions = ["описание-1", "описание-2"];

Можете също така да посочите в колко колони да се показват емотикони (по подразбиране: 8) smiley_columns

config.smiley_columns = 6;

Това и направих

9. Браузър за проверка на правописа.Както е написано UksusoFFбазираната на браузър проверка на правописа е деактивирана в CKEditor.

Config.disableNativeSpellChecker = false;

10. Контекстно меню.В CKEditor при натискане на RMB се отваря контекстно меню, а не родното меню на браузъра

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

Работих с два визуални редактора Tinymceи C.K редакторвъпреки че тези два редактора са доста популярни, честно казано, C.K редакторХареса ми повече или по-скоро беше по-подходящ за моите задачи. Ето защо тук ще разгледаме как е инсталиран редакторът. C.K редактори друг път ще ти кажа.

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

След като изтеглянето приключи, разархивирайте изтегления архив, например в папка библиотекиразположен в основата на сайта. AT index.html между етикети добавете плъгин за редактор ckeditor.js и разбира се библиотеката jQuery.

HTML

И така, остава да създадем формуляр с тестово поле , с които нашият редактор ще взаимодейства.

HTML

Общо взето всичко за инсталацията, след зареждане на страницата при вас, в посоченото текстово поле Сега трябва да се появи текстовият редактор. Този редактор може да бъде персонализиран по ваш вкус, да промените фона на рамката на редактора или езика, можете да зададете ширината и височината на прозореца. Файлът се използва за това. config.js който е в папката libs/ckeditor/config.js . В този файл можем да зададем гореизброените настройки и много други. Повече подробности на официалния сайт.

Например, като промените файла config.js които са показани по-долу, ще променим езика, цвета на рамката и височината на редактора.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.language = "en"; //език config.uiColor = "#AADC6E"; //цвят на рамката config.height = 300; //височина на рамката);

Можете също да промените външния вид на редактора, като зададете в настройките config.toolbarBasic- минимум или Пълна- максимални функции на редактора. Или персонализирайте редактора поотделно, като използвате настройките config.toolbar_Basicкакто е показано в примера по-долу.

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

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.width = 1050; //ширина на прозореца на редактора config.toolbar = "Основна"; //функционалност на редактора, Основна-минимум, Пълна-максимум config.toolbar_Basic = //Индивидуална настройка на основния режим [["Почернен", "Кусив", "-", "Номериран списък", "Списък с водещи символи", "-", "Връзка", "Прекратяване на връзката","-","Smiley"] ]; );

Възможно е да групирате бутони в групи и отново, това изисква файл config.js .

JAVASCRIPT

CKEDITOR.editorConfig = функция (config) ( config.toolbarGroups = [ ( име: "документ", групи: [ "режим", "документ", "doctools" ]), ( име: "клипборд", групи: [ "клипборд ", "отмяна" ] ), ( име: "редактиране", групи: [ "търсене", "избор", "проверка на правописа", "редактиране" ] ), ( име: "формуляри", групи: [ "формуляри" ] ), "/", ( име: "basicstyles", групи: [ "basicstyles", "cleanup" ]), ( име: "параграф", групи: [ "списък", "отстъп", "блокове", "подравняване" ", "bidi", "параграф" ] ), ( име: "връзки", групи: [ "връзки" ] ), ( име: "вмъкване", групи: [ "вмъкване" ] ), "/", ( име : "стилове", групи: [ "стилове" ]), ( име: "цветове", групи: [ "цветове" ]), (име: "инструменти", групи: [ "инструменти" ]), ( име: " други", групи: [ "други" ] ), ( име: "за", групи: [ "за" ] ) ]; );

Като цяло основните настройки текстов редакторпоказано, едно нещо, което не ми хареса, е размерът на този редактор, след изтеглянето му тежи 4m 265kbкоето е твърде много. Ако и това ви притеснява, тогава можете да изтриете директорията проби и също така изчистете каталога с езици, тъй като той тежи най-много. Има много езици, които не се използват, така че можете просто да ги премахнете и да оставите само тези, които са необходими, например руски и английски.

Отидете на каталога libs/ckeditor/lang и тук изтриваме всички файлове с изключение на езика, от който се нуждаете, например, оставете: en.js и en.js . След всички извършени манипулации размерът ще бъде намален наполовина, а директорията ckeditorще изглежда така:

За това имам всички, които знаят други тънкости на този редактор, да пишат в коментарите.