alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Установка визуального редактора CKEditor.

Категория: JQuery Просмотров: 11453 Коментариев: 5 Дата: 2016-12-04 Добавил: admin

 редактора CK Editor

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

Работал я с двумя визуальными редакторами это Tinymce и CK Editor хоть эти два редактора достаточно популярны откровенно скажу, CK Editor мне больше понравился или верней сказать он больше подошел для моих задач. Поэтому здесь мы рассмотрим, как устанавливается именно редактор CK Editor , а как установить Tinymce я расскажу в другой раз.

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

Пакеты редактора CK Editor

После завершения загрузки распаковываем скаченный архив, например, в папку libs которая находится в корне сайта. В index.html между тегами <head> </head> подключаем плагин редактора ckeditor.js ну и конечно библиотеку jquery.

HTML
<script src="libs/jquery/jquery-1.11.2.min.js"> </script>
<script type="text/javascript" src="libs/ckeditor/ckeditor.js"> </script>  

И так, остается создать форму с тестовым полем <textarea></textarea> , с которым и будет взаимодействовать наш редактор.

HTML

                
<script type="text/javascript"> CKEDITOR.replace( 'editor1'); </script>

                

В целом по установке все, после загрузки страницы у Вас, в указанном текстовом поле <textarea> </textarea> уже должен отобразится текстовый редактор. Данный редактор можно настраивать под свой вкус менять фон рамки редактора или язык, можно задать ширину и высоту окна. Для этого используется файл config.js, который находится в папке libs/ckeditor/ config.js. В этом файле мы можем задать выше перечислимые настройки и многие другие. Подробней на официальном сайте.

Например, с помощью изменений в файле config.js, которые показаны ниже мы изменим язык, цвет рамки и высоту редактора.

JAVASCRIPT

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


Так же можно изменить вид редактора, установив в настройке config.toolbarBasic - минимум или Full - максимум функций редактора. Или же индивидуально настроить редактор с помощью настройки config.toolbar_Basic как показано в примере ниже.

В случае выбора минимальной конфигурации возможности редактора будут ограничены и будут доступны только кнопки: задать жирный текст, наклонный шрифт, списки, создать ссылку удалить ссылку ну и смайлики (пример см. ниже).

JAVASCRIPT
CKEDITOR.editorConfig = function( config ) {
config.width = 1050; //ширина окна редактора
config.toolbar = 'Basic'; //функциональность редактора, Basic-минимум, Full-максимум
config.toolbar_Basic = //индивидуальная настройка режима Basic
    [
         ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','Smiley']
    ];
};

Есть возможность группировать кнопки по группам, и снова для этого нужен файл config.js.

JAVASCRIPT

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
                { name: 'forms', groups: [ 'forms' ] },
                '/',
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
                { name: 'links', groups: [ 'links' ] },
                { name: 'insert', groups: [ 'insert' ] },
                '/',
                { name: 'styles', groups: [ 'styles' ] },
                { name: 'colors', groups: [ 'colors' ] },
                { name: 'tools', groups: [ 'tools' ] },
                { name: 'others', groups: [ 'others' ] },
                { name: 'about', groups: [ 'about' ] }
        ];

};

В целом основные настройки текстового редактора показаны, одно что, мне не понравилось это размер этого редактора, после закачки он весит 4м 265кб что как то многовато. Если Вас так же это напрягает, то можно удалить каталог samples а так же почистить каталог с языками так как она и весит больше всех. В ней очень много языков, которые не используются, поэтому попросту можно их удалить и оставить только те, что нужны, например русский и английский.

Заходим в каталог libs/ckeditor/lang и тут удаляем все файлы кроме нужного для вас языка, например, оставляем: ru.js и en.js. После всех проделанных манипуляций размер уменьшится вдвое, а каталог ckeditor будет иметь вид:

директория редактора

На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.


Просмотреть демо: Демо

Скачать исходник: Скачать



    Добавить комментарий:


    Ваше имя

    Текст комментария


    Введите буквы с учетом регистра:





    Тигран

    Тигран, 2018-04-10

    # 27

    Спасибо

    Inwer

    Inwer, 2019-02-04

    # 74

    А зачем нужен редактор? Я пользуюсь вот этим https://c-wd.ru/tools/html/ визуальным редактором HTML и радуюсь

    admin

    admin, 2019-04-17

      #74
    Inwer, 2019-02-04

    # 75

    А зачем нужен редактор? Я пользуюсь вот этим https://c-wd.ru/tools/html/ визуальным редактором HTML и радуюсь

    Данный редактор CKEditor устанавливается непосредственно на Вашем ресурсе и не зависит от сторонних источников.

    Эд

    Эд, 2020-03-16

    # 81

    Подскажите, как установить проверку русской орфографии или отключить встроенную проверку, чтобы подключилась проверка орфографии браузера?

    admin

    admin, 2020-03-25

      #81
    Эд, 2020-03-16

    # 82

    Подскажите, как установить проверку русской орфографии или отключить встроенную проверку, чтобы подключилась проверка орфографии браузера?

    Добрый день!
    На сколько я знаю проверка орфографии самого редактора не самая лучшая. Таким образом лучше включить проверку которая встроена в сам браузер.
    Для этого в файле  config.js добавьте три параметра:


    config.scayt_autoStartup = false; // отключает автопроверку орфографии плагином scayt


    config.disableNativeSpellChecker = false; // отключает запрет на стандартную проверку орфографии браузером


    config.removePlugins = ‘scayt,contextmenu’ // отключает плагин scayt и запрещает заменять контекстное меню.


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


    Надеюсь это решит Вашу проблему.

    Апдейты

    Популярное Свежие записи

    Облако тегов