Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [17.11.2018] Группа Кровавой Дороги [ГКД] (0)
» [17.11.2018] Анимат на форуме для uCoz (0)
» [17.11.2018] Скрипт: Новости по теме для uCoz (0)
» [17.11.2018] Скрипт "Орфограф" beta для uCoz (0)
» [16.11.2018] Бар "100 Рентген" (3)
» [09.11.2018] Инверсия | Inversion (2)
» [09.11.2018] Как оформить тему? (0)
» [09.11.2018] S.T.A.L.K.E.R. 2 (1)
» [09.11.2018] Даты выхода модов Сталкер (2)
» [09.11.2018] N.I.K.S.O.N. MOD (ТЧ) (2)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Time Gap (50)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Личные сообщения (18)
» Редактирование мода «Народная солянка Объединенный пак ... (18)
» Проблемы в модуле "Пользователи" (17)
» Xemordio (2886)
» NL-Vincenz (11)
» Duzeppa26 (5)
» Ghosteron (4)
» Glomar (1)
» Бармен (1)
» Даниил_Хороший (1)
» marinak1984 (0)
» johnnym (0)
» LENA_D (0)
» [16.11.2018] d0om801
» [13.11.2018] parabranma
» [13.11.2018] doon80
» [12.11.2018] lemberg123
» [09.11.2018] alurongdannov
» [09.11.2018] NL-Vincenz
» [07.11.2018] eugen55eugen
» [07.11.2018] kadastrapro
» [22.10.2018] subbotin440
» [19.10.2018] goooooooooogle380

  • Страница 1 из 1
  • 1
Форум » Web uCoz » Другие скрипты » Поставить визуальный редактор на сайт
Поставить визуальный редактор на сайт
Xemordio Offline Дата: Вторник, 16.10.2018, 14:50 | Сообщение # 1
Администратор
Звание: Генерал [?]
Сообщений: 2886
Поставить визуальный редактор на сайт (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
Поиск:

18:45