Wysiwyg html редактор

Wysiwyg html редактор

Добре знайомий усім Microsoft Word є відмінним прикладом реалізації концепції WYSIWYG. Користувачам даної програми немає необхідності знати теги для форматування тексту, адже форматування здійснюється автоматично, після натискання на відповідні кнопки на панелі управління.

Wysiwyg html редактор

Перед тим як вибрати плагін я раджу подивитися на працездатність хоча б перших трьох з цього списку. До речі CKeditor є більш сучасною версією FCKeditor. тобто по суті - це один і той же продукт.

Визначившись з вибором, я почав експериментувати з налаштуваннями TinyMCE.

Відкривши сторінку index.html з папки examples. ми побачимо демонстрацію можливостей цього плагіна.

Wysiwyg html редактор

У моєму випадку я залишив цей набір кнопок:

theme_advanced_buttons1. "Code, |, justifyleft, justifycenter, justifyright, justifyfull, formatselect, fontselect, fontsizeselect, |, undo, redo, |, bold, italic, underline, strikethrough, |, bullist, numlist, |, forecolor, backcolor, |, link , unlink, image, |, hr, removeformat, |, sub, sup, |, charmap, emotions, ".
theme_advanced_buttons2. "Tablecontrols".

Ось яка панель повинна вийти при таких налаштуваннях:

Я вважаю цього достатньо для рядового користувача, і створення форматованого контенту сторінок.

// General options
theme. "Advanced".
plugins. "Autolink, lists, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking , xhtmlxtras, template, advlist ".

// Example content CSS (should be your site CSS)
content_css. "Css / content.css".

// Drop lists for link / image / media / template dialogs
template_external_list_url. "Lists / template_list.js".
external_link_list_url. "Lists / link_list.js".
external_image_list_url. "Lists / image_list.js".
media_external_list_url. "Lists / media_list.js".

// Replace values ​​for the template plugin
template_replace_values. # 123;
username. "Some User".
staffid. "991234"
# 125;
# 125; # 41; ;
# 125; # 41; ;

  • У параметрі script_url. змінюємо шлях до скриптів плагіна на вашому сервері;

На цьому підключення плагіна можна вважати завершеним. Якщо шляху вказані, вірно, то все буде працювати.

Щоб дані введені в текстове поле відправлялися на сервер, потрібно обернути елемент textarea в форму, або прописати AJAX обробник. для відправки даних як це зроблено в останній версії moguta.cms.

висновок контенту

У першій статті циклу "Пишемо інтернет магазин на php" про MVC паттерне. я заклав в систему правило, про виведення інформації таки чином, що для кожної зі сторінок необхідно було створити як мінімум два php файлу (контролер і відображення).

На сьогоднішній момент ми маємо три відправних точки для виведення контенту на сторінки сайту:

  1. Висновок інформації за коштами роботи парадигми MVC;
  2. Висновок інформації таблиці `page` в базі даних.
  3. Виведення інформації з папки mg-page;

У чому відмінність цих трьох методів і навіщо я їх створив?

Перший метод - основа роботи системи, думаю, цього не потрібно пояснювати. Сторінка являє собою результат роботи двох файлів (контролер + вид).

Третій метод - стане в нагоді розробникам сайту, і дозволить виконувати серверні скрипти перед виведенням запитуваної сторінки. Сторінка являє собою результат роботи однойменного php скрипта з папки mg-page.

Пріоритет методів виведення сторінок

Припустимо ми маємо:

  • Контролер delivery.php (./mg-core/application/controllers)
  • Статичну сторінку delivery.html (База даних)
  • Скрипт delivery.php (./mg-page)

При будь-якому з наступних запитів користувача:

Обробляти висновок сторінок буде контролер:

При відсутності контролера наступним за пріоритетом йде скрипт /mg-page/delivery.php. виводить інформацію на сторінку.

Якщо відповідного скрипта в ./mg-page не виявлено, система шукає дані в базі.

Тобто за пріоритетами виходить такий розклад:

  • Контролер - перший
  • Скрипт з mg-page - другий
  • Сторінка з бази даних - третій

Сподіваюся, ви зуміли не заплутатися в моєму викладі роботи системи. 🙂