Установка и настройка SSEditor

1. Скачайте архив с редактором и скопируйте папку "sseditor" из него на ваш сервер.

2. В html-код страницы, на которой хотите разместить редактор, добавьте теги:

код скопирован в буфер
  1. <script type="text/javascript" src="http://www.scriptscript.ru/sections/scripts/sseditor/sseditor.js"></script>
  2. <link rel="stylesheet" type="text/css" href="http://www.scriptscript.ru/sections/scripts/sseditor/css/sseditor.css">

при этом ссылки, ведущие к внешним файлам, отредактируйте согласно пути скопированной папки.

3. В то место кода, в которое вы хотите вставить редактор (но после тегов из п.2), поместите строки:

код скопирован в буфер
  1. <div class="SSEditor" id="editor">
  2. <div>
  3. <a href="#" onclick="SSEditor.Do('b'); return false;" class="b" title="Жирный шрифт" onmousedown="return false;"></a>
  4. <a href="#" onclick="SSEditor.Do('i'); return false;" class="i" title="Курсив" onmousedown="return false;"></a>
  5. <a href="#" onclick="SSEditor.Do('u'); return false;" class="u" title="Подчеркнутый шрифт" onmousedown="return false;"></a>
  6. <a href="#" onclick="SSEditor.Do('s'); return false;" class="s" title="Зачеркнутый шрифт" onmousedown="return false;"></a>
  7. <a href="#" onclick="SSEditor.Do('left'); return false;" class="left" title="Выровнять текст или картинку по левому краю" onmousedown="return false;"></a>
  8. <a href="#" onclick="SSEditor.Do('center'); return false;" class="center" title="Выровнять текст по центру" onmousedown="return false;"></a>
  9. <a href="#" onclick="SSEditor.Do('right'); return false;" class="right" title="Выровнять текст или картинку по правому краю" onmousedown="return false;"></a>
  10. <a href="#" onclick="SSEditor.Do('justify'); return false;" class="justify" title="Выровнять текст по ширине" onmousedown="return false;"></a>
  11. <a href="#" onclick="SSEditor.Do('ul'); return false;" class="ul" title="Маркированный список" onmousedown="return false;"></a>
  12. <a href="#" onclick="SSEditor.Do('ol'); return false;" class="ol" title="Нумерованный список" onmousedown="return false;"></a>
  13. <a href="#" onclick="SSEditor.Do('quote'); return false;" class="quote" title="Цитата" onmousedown="return false;"></a>
  14. <a href="#" onclick="SSEditor.Do('img'); return false;" class="img" title="Картинка" onmousedown="return false;"></a>
  15. <a href="#" onclick="SSEditor.Do('a'); return false;" class="a" title="Ссылка" onmousedown="return false;"></a>
  16. <a href="#" onclick="SSEditor.Do('email'); return false;" class="email" title="Email" onmousedown="return false;"></a>
  17. <a href="#" onclick="SSEditor.Do('smile'); return false;" class="smile" title="Смайлы" onmousedown="return false;"></a>
  18. <a href="#" onclick="SSEditor.Do('php_html'); return false;" class="php_html" title="HTML-код со вставками PHP, JavaScript и CSS" onmousedown="return false;"></a>
  19. <a href="#" onclick="SSEditor.Do('php'); return false;" class="php" title="PHP-код" onmousedown="return false;"></a>
  20. <a href="#" onclick="SSEditor.Do('html'); return false;" class="html" title="HTML-код" onmousedown="return false;"></a>
  21. <a href="#" onclick="SSEditor.Do('css'); return false;" class="css" title="CSS-код" onmousedown="return false;"></a>
  22. <a href="#" onclick="SSEditor.Do('javascript'); return false;" class="javascript" title="JavaScript-код" onmousedown="return false;"></a>
  23. <a href="#" onclick="SSEditor.Do('mysql'); return false;" class="mysql" title="MySQL-код" onmousedown="return false;"></a>
  24. <a href="#" onclick="SSEditor.Do('code'); return false;" class="code" title="Программный код" onmousedown="return false;"></a>
  25. <a href="#" onclick="SSEditor.Do('bbcode'); return false;" class="bbcode" title="Включить/выключить показ BB-кода" onmousedown="return false;"></a></div>
  26. <div><textarea style="width: 700px; height: 200px; padding: 0px; margin: 0px;">Маша ела кашу. :-)</textarea></div>
  27. </div>

Каждая ссылка здесь – это управляющая иконка редактора, если какие-то иконки вам не нужны, удалите соответствующие ссылки из листинга.

4. Далее в коде ниже строк из п.3. инициируйте запуск редактора. В листинге необходимо, как и раньше, отредактировать пути к файлам смайликов:

код скопирован в буфер
  1. <script type="text/javascript">
  2. // задаем параметры
  3. var parameters =
  4. {
  5.     allowQuotesInQuote : true, // позволять цитаты в цитате
  6.     useSmiles : true, // преобразовывать смайлики в графические иконки
  7.     // смайлы
  8.     smiles : {'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/smile.gif' : ':-)',
  9.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/big_smile.gif' : ':-D',
  10.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/cool.gif' : '8-)',
  11.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/cray.gif' : [':\'-(', 4],
  12.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/lol.gif' : ':lol:',
  13.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/yes.gif' : ':yes:',
  14.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/nea.gif' : ':no:',
  15.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/girl_angel.gif' : 'O:-)',
  16.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/hmm.gif' : [':hmm:', 4],
  17.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/sad.gif' : ':-(',
  18.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/mad.gif' : ':-\\',
  19.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/diablo.gif' : ']:->',
  20.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/tongue.gif' : ':-P',
  21.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/wink.gif' : ';-)',
  22.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/yikes.gif' : ':-O',
  23.     'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/unknown.gif' : ':-$'},
  24. }
  25. // инициализация редактора
  26. SSEditor.Init(document.getElementById('editor'), parameters);
  27. </script>

В функцию инициализации необходимо передать два параметра: контейнер редактора, либо его id и объект параметров самого SSEditor. О том, что значит каждый параметр см. ниже.

Дополнительные функции

SSEditor.Check() – обновление bb-кода в textarea согласно содержимому фрейма (визуального окна редактора). Функцию необходимо запускать перед сабмитом формы.

SSEditor.UpdateSmiles(set) устанавливает, будет ли SSEditor преобразовывать текстовое представление смайликов, наподобие :-), в графические иконки. Если set равен true, преобразование происходит, если false – нет.

SSEditor.Do(what, data) – основная функция SSEditor-а, которая запускает какое-либо преобразование в окне редактора: выделение жирным, курсивом, вставка картинок, ссылок и т.д. Аргумент what - тип действия, data - объект параметров.

Возможные значения аргумента what:

b – жирный шрифт,
i – курсив,
u - подчеркнутый шрифт,
s – зачеркнутый шрифт,
left - выровнять текст или картинку по левому краю,
center - выровнять текст по центру,
right - выровнять текст или картинку по правому краю,
justify - выровнять текст по ширине,
ul - маркированный список,
ol - нумерованный список,
quote - цитата,
img - картинка,
a - ссылка,
email - email,
smile - показ окна смайликов,
bbcode - Включить/выключить показ BB-кода,
php_html – HTML-код со вставками PHP, JavaScript и CSS,
php - PHP-код,
html - HTML-код,    css – CSS-код,
javascript - JavaScript-код,
mysql - MySQL-код,
code - программный код.

Дополнительные значения для отображения программного кода могут быть установлены в параметре SSEditor.parameters.classes.

Функция SSEditor.Do() может использоваться для вставки цитат в окно редактора на место выделенного текста следующим образом:

код скопирован в буфер
  1. <a href="#" onclick="SSEditor.Do('quote', {user_id : 1, container : document.getElementById('comment')}); return false;">цитировать</a>
  2. <div id="comment">Текст сообщения</div>

Здесь объект data содержит два параметра – идентификатор пользователя user_id и контейнер container, содержащий текст цитируемого сообщения. Если при клике на ссылку "цитировать" внутри контейнера есть выделение – выделенный текст берется в качестве цитаты, если нет – в качестве цитаты берется все содержимое контейнера. О том, зачем нужен параметр user_id смотрите описание SSEditor.parameters.users.

SSEditor.Popup(event, parameters) – функция показа всплывающего окна. В SSEditor она применяется для показа окна смайликов, но может использоваться и независимо от редактора. В SSEditor.Popup() передаются два аргумента – объект "событие" и объект параметров.

Параметры могут быть следующие:

element - элемент, относительно которого позиционируется окно;
popupId - идентификатор окна, текстовая строка, должна быть уникальна для разных окон;
groupId – идентификатор группы окон, текстовая строка, окна с одинаковым groupId скрываются при показе других окон той же группы;
type - тип окна, static – статическое, disappearing – исчезающее, по умолчанию тип static;
title - заголовок окна;
body - содержимое окна;
formOnly - если параметр равен true, происходит только формирование окна без показа, если false или не указан – показ окна.

Пример запуска:

код скопирован в буфер
  1. <a href="#" onclick="ShowWindow(event, this); return false">показать окно</a>
  2. <script type="text/javascript">
  3. function ShowWindow(event, element)
  4. {
  5.     SSEditor.Popup(event,
  6.     {
  7.         element : element,
  8.         popupId : 'window1',
  9.         groupId : 1,
  10.         type : 'static',
  11.         title : 'Заголовок',
  12.         body : 'Тело сообщения<br>Тело сообщения<br>Тело сообщения'
  13.     });
  14. }
  15. </script>

Параметры

Параметры работы редактора передаются в функцию инициализации SSEditor.Init() и помещаются в объект SSEditor.parameters. Ниже приведен список всех параметров с описанием.

baseUrl – url папки редактора. Параметр определяется автоматически и задавать его отдельно нет смысла, но если вы меняли имя файла sseditor.js, задание baseUrl обязательно.

allowQuotesInQuote  – позволять ли пользователям использовать цитаты внутри других цитат. true – позволять, false – нет, по умолчанию true.

useSmiles – преобразовывать ли текстовое представление смайликов, наподобие :-), в графические иконки, true – преобразовывать, false – нет, по умолчанию true, Параметр может быть изменен "на лету" при помощи функции SSEditor.UpdateSmiles().

smilesDialogType – тип окна смайликов. Возможные значения: popup, jqueryui. Если параметр равен popup, используется встроенное всплывающее окно редактора SSEditor.Popup(), если параметр равен jqueryui и при этом подключена библиотека jQuery с поддержкой jQuery UI, окно создается при помощи функции Dialog данной библиотеки. Также, если установлена только jQuery без UI, то popup появляется и исчезает пользуясь графическим эффектом на основе jQuery.

smiles – смайлики, используемые редактором, объект JavaScript. Ключами в нем являются пути к графическим иконкам смайлов, а значениями текстовые представления смайликов, например:

код скопирован в буфер
  1. {'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/smile.gif' : ':-)'}

Допустимо также представление:

код скопирован в буфер
  1. {'http://www.scriptscript.ru/sections/scripts/sseditor/images/smiles/hmm.gif' : [':hmm:', 4]}

В этом случае значение элемента массив, где 1-й элемент текстовое представление смайлика, а 2-й – смещение по горизонтали в диалоге смайликов. Такое задание нужно для выравнивания разных по ширине смайлов в диалоге.

users – объект, содержащий идентификаторы и имена пользователей, которые подставляются при цитировании, пример:

код скопирован в буфер
  1. {1 : 'Зарегистрированный пользователь', '23aaa' : 'Еще один зарегистрированный пользователь'}

Теперь, если вы запустите функцию SSEditor.Do() таким образом:

код скопирован в буфер
  1. SSEditor.Do('quote', {user_id : 1, container : document.getElementById('comment')})

в заголовке цитаты отобразится "Зарегистрированный пользователь пишет:", а если без указания user_id:

код скопирован в буфер
  1. SSEditor.Do('quote', {container : document.getElementById('comment')})

то заголовок будет просто "Цитата:".

В случае указания id пользователя bb-код цитаты формируется так: [quote=#user_id]...[/quote], где user_id и есть нужный идентификатор.

classes – имена классов, которые используются во фрейме для разных элементов. Параметр classes должен иметь такую структуру:

код скопирован в буфер
  1. {
  2.     // классы абзацев, списков, цитат при выравнивании текста соответственно
  3.     // по левому краю, центру, правому краю и ширине родительского элемента
  4.     text : {left : '', center : 'center', right : 'right', justify : 'justify'},
  5.     // классы картинок при выравнивании по левому и правому краям
  6.     image : {left : 'left', right : 'right'},
  7.     // класс смайликов
  8.     smile : 'smile',
  9.     // классы блоков программного кода
  10.     code : {php_html : 'php_html', php : 'php', html : 'html', css : 'css', javascript : 'javascript', mysql : 'mysql', code : 'code'}
  11. };

Ключи элементов здесь это то, чему соответствует класс (текст по левому краю, текст центру, смайл и т.д.), а значения – имена классов.

Если вы хотите создать новые классы для программного кода, необходимо указать параметр classes при запуске SSEditor.Init() добавив в него необходимые ключи и значения, и вставить соответствующую иконку на панель задач редактора.

frameClass – класс, который будет присвоен фрейму окна редактора.

frameHTML – html-шаблон фрейма окна редактора. Должен содержать строку %body%, на место которой помещается содержимое тега body фрейма. Также, на место строки %baseUrl%, если она присутствует в шаблоне,  ставится url папки редактора. Если параметр frameHTML не задан, в качестве шаблона принимается строка:

код скопирован в буфер
  1. '<html><head><link href="%baseUrl%css/iframe.css" rel="stylesheet" type="text/css" /><style>img {width: auto !important; height: auto !important;}</style></head><body style="margin: 0px; padding: 0px 4px 0px 4px">%body%</body></html>'

Теги: JavaScript
Другие скрипты...

Добавление комментария

Имя:
Преобразовывать в тексте комментария смайлики в графические иконки
Защитный код:
Защитный код
 
 
                                                                                                                                                                                                       
Copyright © 2019 ScriptScript.ru, по всем вопросам пишите нам через форму обратной связи.
364319675