Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [22.01.2019] Сталкерское меню как на STALKER-ZONE (0)
» [20.01.2019] Контент блоки Сталкер // Content block stalker (12)
» [17.01.2019] Распознание шрифта на картинке (1)
» [16.01.2019] Новый Арсенал 5.1 (Перезагрузка) (1)
» [15.01.2019] CS:GO Menu Screen CSS (0)
» [15.01.2019] CSGO Killfeed CSS (0)
» [12.01.2019] Mario Kart DS (0)
» [12.01.2019] Вид материалов в стиле «Кирпичная кладка» для u... (0)
» [12.01.2019] Новый вид комментариев для uCoz (0)
» [12.01.2019] Система уровней пользователей для uCoz (0)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Time Gap (50)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» [DMX] Народное творчество (24)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Личные сообщения (18)
» Редактирование мода «Народная солянка Объединенный пак ... (18)
» Xemordio (3123)
» NL-Vincenz (12)
» Infe[R]nos (7)
» Duzeppa26 (5)
» Ghosteron (4)
» Даниил_Хороший (1)
» gromgold (1)
» ZION (1)
» kamelotto (1)
» Бармен (1)
» [19.01.2019] gavyxte
» [18.01.2019] Sedoy
» [17.01.2019] Nik_nikolaev2k18
» [13.01.2019] dextyar96
» [09.01.2019] max202
» [07.01.2019] Infe[R]nos
» [06.01.2019] zgenaz
» [01.01.2019] iivelesii
» [28.12.2018] sas555555
» [27.12.2018] iano1

  • Страница 1 из 1
  • 1
Форум » Web uCoz » Другие скрипты » Поставить визуальный редактор на сайт
Поставить визуальный редактор на сайт
Xemordio Offline Дата: Вторник, 16.10.2018, 14:50 | Сообщение # 1
Администратор
Звание: Маршал [?]
Сообщений: 3124
Поставить визуальный редактор на сайт (WYSIWYG)
Бывает так, что начинающие разработчики уклоняются от маневренности с визуальными редакторами (WYSIWYG) — часто используют то, что дают, т.е. визуальный редактор, вмонтированный в готовую CMS. Но что делать, когда речь идет о собственной разработке? Или, если визуальный редактор на готовой CMS «глючит»? На самом деле, поставить визуальный редактор на сайт довольно просто. Сейчас я занимаюсь написанием класса галереи на PHP, и мне понадобилось поставить визуальный редактор. Здесь я хочу поделиться общими принципами работы и монтажа визуальных редакторов.



Я искала визуальный редактор, приятный глазу, чтобы не пришлось переделывать дизайн и лишний раз тратить время. В процессе, я нашла и испытала несколько визуальных редакторов.Монтаж визуальных редакторов на сайт представляет простую систему действий. Нужно поставить в тег HEAD ряд запросов на скрипты (предварительно загрузив всю папку с визуальным редактором на сервер). В скаченных файлах обычно предоставляется демо-версия использования, именно из кода этой страницы легко получить названия нужных скриптов. Здесь же небольшой код, употребляемый в BODY страницы, для непостредственного использования редактора. Его мы будем размещать на место в html-форме, где нам нужно.
Визуальные редакторы делятся на виды, используя различную обработку. Так, я встретила визуальные редакторы, основанные на jQuery, MooTools, ActiveX и просто JavaScript.

Визуальные редакторы с использованием MooTools
Мне попались весьма интересные визуальные редакторы, основанные на этой технологии. Однако, из-за несовместимости со скриптами jQuery, уже употребляемыми на сайте для других нужд, я продолжила поиски чего-то более универсального.

Пример визуального редактора MooEditable с использованием MooTools



Скрипты, вставляемые между тегами <HEAD></HEAD>:
Код
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
  <script type="text/javascript" src="../assets/mootools.js">
</script>
  <script type="text/javascript" src="../../Source/MooEditable/MooEditable.js">
</script>

  <script type="text/javascript">
   window.addEvent('load', function(){
    $('textarea-1').mooEditable();

    // Post submit
    $('theForm').addEvent('submit', function(e){
     alert($('textarea-1').value);
     return true;
    });
   });
  </script>

Следует обратить внимание, что ссылки на скрипты относительны — они запрашиваются из папки «Demos».
Для использования на сайте, поставьте нужный путь к скриптам на вашем сервере.

Использование в

Код
<label for=»textarea-1″>Textarea 1</label> <textarea id=»textarea-1″ name=»editable1″> —Здесь текст, написанный в визуальном редакторе— </textarea>


Здесь используется стандартный тег формы TEXTAREA, что сделает поле ввода рабочим даже при условии отключеия
JavaScript у пользователя (хотя все опции визуального редактора работать не будут).

[grayb]Скачать визуальный редактор MooEditable[/grayb]

Пример ggEdit, визуальный редактор на основе MooTools
В FireFox этот визуальный редактор («ggEdit») отказался работать вовсе. Как пользователю Mozilla, меня это совершенно не устроило.
Впрочем, интерфейс у такого визуального редактора (пример «ggEdit» (исходник можно скачать здесь)) мне понравился.



Визуальные редакторы на основе jQuery
Этот визуальный редактор (WKRTE), возможно, был бы хорош, если бы модульные окна (вставка изображения, ссылки) не всплывали за рамкой экрана
Пример WKRTE, визуальный редактор на основе jQuery:



Примечательно, что основные скрипты вставляются не в <HEAD>…</HEAD>, где, в основном, запросы на стили (CSS):
Код
<HEAD>    

<!-- shitload of crap for IE -->
    <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
type="text/javascript">
</script><![endif]-->
    <!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript">
</script><![endif]-->
    <!-- END -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/wkrte.css" />
</HEAD>


Основные скрипты окажутся перед закрывающим тегом </BODY>:

<BODY>
Код
<textarea cols="70" rows="20" class="wkrte-1" method="post" action="#">
--Какое-то содержимое--
</textarea>

<!-- The scripts that will do all the magic -->
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/wkrte.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
  var arr = $('.wkrte-1').rte({
   width: 720,
   height: 520,
   controls_rte: rte_toolbar,
   controls_html: html_toolbar
  });
    });
</script>


</BODY>

[grayb]Скачать визуальный редактор WKRTE[/grayb]

Визуальный редактор AJAX, jQuery, JavaScript

Этот визуальный редактор («CKEditor») использует богатую палитру технологий в своих примерах использования. Хотя AJAX здесь выполняет скорее вспомогательные — а не ключевые — функции визуального редактора. Основная библиотека: jQuery, JavaScript.
Не проводила скрупулезного тестирования на предмет кроссбраузерности, но в моих браузерах работает на «ура», что не могло не обрадовать. Дополнительный плюс — Русский язык!



Скрипты: могут быть разные. Один из примеров:

Основная библиотека в HEAD:

<HEAD>
Код
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />

</HEAD>

<BODY>
Код
<textarea cols="80" id="editor1" name="editor1" rows="10">
--Какое-то содержимое--
</textarea>
   <script type="text/javascript">
   //<![CDATA[

    // This call can be placed at any point after the
    // <textarea>, or inside a <head><script> in a
    // window.onload event handler.

    // Replace the <textarea id="editor"> with an CKEditor
    // instance, using default configurations.
    CKEDITOR.replace( 'editor1' );

   //]]>
   </script>

</BODY>

[grayb]Скачать визуальный редактор CKeditor[/grayb]
Дата регистрации: 22.07.2017
Форум » Web uCoz » Другие скрипты » Поставить визуальный редактор на сайт
  • Страница 1 из 1
  • 1
Поиск:

12:20