29. Грудень 2010 · Коментарі Вимкнено до встановлення на сайт wysisyg-редактора (CKEditor) · Categories: Веб-дизайн · Tags: , , , ,

учора вирішив, що пора би вже було б встановити собі на сайт нормальний редактор та не морочитися з редагуванням html кода вручну. після довгих і марудних пошуків різноманітних wysiwyg-редакторів (what you see is what you get – що бачимо, те й маємо) випадково натрапив на такий собі CKEditor. почитав про нього і виявилося, що досить функціональний редактор, який видає чистий код, якщо порівнювати з іншими, проте, на скільки я зрозумів із відгуків, цей редактор має проблеми з роботою в браузері opera. поки не тестував, тому не мав можливості переконатися на власні очі, але у фаєрфоксі (firefox) він працює бездоганно. все, що потрібно, це зайти на офіційний сайт (а ще краще просто знайти безкоштовний дистрибутив десь в інтернеті), розархівувати це в кореневий каталог сайта, залишивши назву папки (ckeditor), як вона є (всередині можна видалити дві папочки, які починаються з підкреслення – то для розробників, але якщо єдине завдання редактора – це у його теперішньому стані допомагати вам редагувати текст – то ці дві папки внутрішні можна спокійно видаляти). далі просто йдете на офіційний сайт, відкриваєте розділ з документацією та читаєте, що спочатку треба вставити такий код на сторінку:

<textarea name=”editor1″>&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
<script type=”text/javascript”>
CKEDITOR.replace( ‘editor1′ );
</script>

от у цьому полі і з’являтиметься ваш редактор. оця абракадабра – &lt;p&gt;Initial value.&lt;/p&gt; – початкове значення, яке з’являтиметься у полі після завантаження сторінки (сюди спокійно можна вставляти текст, який буде редагуватися).

якщо є необхідність додати на сторінку кілька полів для редагування, то це не проблема. просто для всіх наступних копій редактора у полі CKEDITOR.replace( ‘editor1′ ); треба просто вказати іншу назву, наприклад, editor2 тощо.

якщо ж вам треба трохи відредагувати панелі інструментів та залишити тільки ті, що вам потрібні для роботи, то відкриваєте файл з налаштуваннями: config.js. у цьому файлі просто потрібно дописати кілька рядків, а саме:

config.toolbar = ‘Full';
config.toolbar_Full =
[
[‘Source’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘,’Print’, ‘SpellChecker’, ‘Scayt’],
[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
[‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’],
[‘BidiLtr’, ‘BidiRtl’],
‘/’,
[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’,’CreateDiv’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],
‘/’,
[‘Styles’,’Format’,’Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘Maximize’, ‘ShowBlocks’,’-‘,’About’]
];

config.toolbar = ‘Full'; – це вказівка, що використовується набір усіх панелей.

є ще спрощений варіант:

config.toolbar = ‘Full'; (в цьому полі треба буде змінити Full на Basic), а також додати такі рядки:

config.toolbar_Basic =
[
[‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’,’-‘,’About’]
];

особливістю редактора є те, що його можна налаштовувати під свої потреби, для цього просто видаляєте те, що вам не потрібно. скажімо, є у вас рядок зі списком панелей для розрівнювання тексту: [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’]. якщо вам не потрібна функція вирівнювання по правому краю, то просто видаляєте ‘JustifyRight’, тільки будьте обережними з комами.

є маса інших налаштувань, список яких можна знайти на офіційному сайті. скажімо, можна відразу задати такі параметри:

config.language = ‘uk';
config.uiColor = ‘#af9b7f';
contentsLangDirection = ‘uk';
config.resize_minWidth = 520;

перший рядок каже, якою мовою буде відображатися редактор (є купа локалізацій на різні мови). далі – колір редактора, далі – мова за замовчуванням, далі – мінімальна ширина, до якої може звужуватися редактор. отак-от :)

Comments closed.