Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Альтернативный текстовый редактор с расширенными возможностями на вашем форуме Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Альтернативный текстовый редактор с расширенными возможностями на вашем форуме Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Проблема с метатегом Description
автор VeraLV Вчера в 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

» 2x2 форум
автор лексей2222 Февраль 12th 2024, 14:47

» сколько сообщений в теме
автор лексей2222 Февраль 10th 2024, 07:24

Альтернативный текстовый редактор с расширенными возможностями на вашем форуме

Перейти вниз

Альтернативный текстовый редактор с расширенными возможностями на вашем форуме Empty Альтернативный текстовый редактор с расширенными возможностями на вашем форуме

Сообщение автор Дмитрий Зверев Сентябрь 15th 2017, 20:37

Здравствуйте! Хочу поделиться с вами возможностью создания альтернативного текстового редактора с расширенными возможностями на вашем форуме.

Возможности текущего текстового редактора сообщений форума, используемого по умолчанию, весьма ограничены. Как вы заметили, его нельзя кардинально редактировать, он не форматирует таблицы, формулы, не создает диаграммы, слабо работает с форматированием картинок и не использует все возможности языка HTML, например якоря для ссылок внутри текста темы или сообщения, так как работает только с BB-кодами (да и то не со всеми).
Хочу предложить вам инструкцию по подключению мощного HTML-редактора CKEditor, который будет открываться на отдельной странице форума по нажатию на кнопку в вашем панели BB-кнопок стандартного редактора сообщений. С помощью него вы сможете создать тему или сообщение и отредактировать его дизайн так, как вам захочется. Затем останется только скопировать и перенести HTML-код в поле вашего сообщения в теме (в режиме вставки кода).

1. Получение кода HTML-редактора CKEditor

Для этого перейдите на сайт https://ckeditor.com/download
Регистрироваться на нём не нужно и платить тоже, так как сервис бесплатный.
Выберите один из трех вариантов текстового редактора:

  • Basic Package
  • Standard Package
  • Full Package
  • Customize

Рекомендую сперва для пробы перейти к пункту CKEditor CDN и выбрать Full Package. Как экспериментировать с Customize и скачиванием кода расскажу позже. Сохраните где-нибудь, например, в текстовом файле предлагаемый скрипт. Например:
Код №1
Код:
<script src="//cdn.ckeditor.com/4.7.2/full/ckeditor.js"></script>
Нажмите на ссылку чуть ниже в том же блоке How to use.
Скопируйте код ниже слов "Quick example" между тегами <body></body>. Когда я писал эти строки, так был такой код:
Код №2.
Код:
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>


2. Создание страницы на вашем форуме с текстовым редактором CKEditor

Зайдите в панель администратора (ПА). Далее Модули->Управление страницами HTML. Создайте в продвинутом режиме новую страницу "Текстовый редактор". "Вы хотите использовать верх и низ вашего форума?" - "Да". "Использовать эту страницу в качестве Главной?" - "Нет".

Вставьте в код страницы Код №1 и Код №2, заключённый в теги <form></form>
В целом рекомендую Вам вставить вот такой код (Код №3):
Код:
<script src="//cdn.ckeditor.com/4.7.2/full/ckeditor.js"></script>
<h2 style="text-align: center;">
               Текстовый редактор              
</h2>
<form>
               <textarea cols="80" rows="30" id="editor1" name="editor1"><span style="text-decoration: underline;">Порядок работы с текстовым редактором:</span><br/>
<span>1. Создайте текст и оформление свой публикации в текстовом редакторе с помощью его интерфейса.<br/>  
2. Нажмите на кнопку "Источник" вверху и слева на панели инструментов. Вы увидите html-код вашей публикации.<br/>
3. Выделите весь html-код и скопируйте его.<br/>
4. Вставьте скопированный код в окошко под текстовым редактором "Insert HTML Code to Optimize" и нажмите кнопку "Optimize".<br/>
5. Выделите сжатый вариант html-кода и скопируйте его.<br/>
6. Откройте окно с вашей темой и вставьте в режиме вставки кода (нажатая кнопка с пустым листом) в поле содержания темы (или сообщения) последний скопированный код.<br/>
7. Нажмите "Отправить". Готово!</span></textarea><script>CKEDITOR.replace( 'editor1' );</script>
</form>

Не закрывайте пока окно. Далее нужно вставить окошко для оптимизации HTML-кодов сообщений, которые вы будете создавать с помощью CKEditor'а, так как код который он генерирует содержит пустые строки-разделители, а это при вставке в поле кода вашего сообщения на форуме BB-компилятором будет восприниматься именно как пустая строка, так что в итоге текст вашего сообщения будет сильно растянут из-за множества пропущенных строк. Именно поэтому HTML-код перед вставкой в сообщение нужно сжимать.
Такой онлайн-сервис есть. http://www.webtoolhub.com/tn561361-html-optimizer.aspx Он бесплатен. Поэтому добавьте ниже Кода №3 следующий код (Код №4):

Код:
<p></p>
<table cellpadding="5" cellspacing="0" border="0" style="width: 100%; border-collapse: collapse">
<tr>
<td>
  <table cellpadding="2" cellspacing="0" style="border-collapse: collapse; text-align:center; width:500px;">
    <tr>
      <td>
        <b>Insert HTML Code to Optimize</b>
      </td>
   </tr>
   <tr>
      <td>
        <textarea type="text" name="inputdata" value="" style="width:98%; height:120px" ></textarea>
      </td>
   </tr>
   <tr>
      <td>
        <input type="button" value="Optimize" onclick="OnSubmitPluginInput(this,'http://www.webtoolhub.com/plugins/wt561361-html-optimizer.aspx');" />
      </td>
   </tr>
  </table>
</td>
</tr>
<tr>
<td>
  <iframe name="pluginframe561361" frameborder="0" style="width: 100%; height: 300px"></iframe>
</td>
</tr>
<tr>
<td style="font-size: 9pt; font-family: Verdana, Arial;">
  Powered by: <a href="http://www.webtoolhub.com/tn561361-html-optimizer.aspx" title="Free Webmaster Tools">WebToolHub.com</a>
</td>
</tr>
</table>
<script type="text/javascript" src="https://secure.webtoolhub.com/plugin.axd"></script>
Нажмите "Ок". Ваша страница с текстовым редактором готова.
В итоге она будет выглядеть примерно так.
Альтернативный текстовый редактор с расширенными возможностями на вашем форуме 11b93eacacd1a6ca2deb241b8f277208

3. Создание кнопки в BB-панели текущего редактора сообщений

Теперь в кнопочном BB-меню необходимо создать вот такую кнопку.
Альтернативный текстовый редактор с расширенными возможностями на вашем форуме Za10

Код Javascript  

Для этого в ПА зайдите в Модули->Управление кодами Javascript  и создайте новый код "bb-кнопки", если вы его не создавали раньше. В пункте "Расположение" укажите "На всех страницах".
Код №5:
Код:
$(function () {$(function () {if ($.sceditor) {
$('<div class="sceditor-group">
<a href="URL вашего форума/h#-page" target="_blank" class="sceditor-button sceditor-button-alteditor" unselectable="on" title="Расширенный текстовый редактор"><div>Перейти к расширенному текстовому редактору</div></a>
</div>').appendTo($('.sceditor-toolbar'));
}});});
Если bb-кнопки вы уже создавали, и этот код у вас уже есть, то тогда после
Код:
$('<div class="sceditor-group">
вставьте только
Код:
<a href="URL вашего форума/h#-page" target="_blank" class="sceditor-button sceditor-button-alteditor" unselectable="on" title="Расширенный текстовый редактор"><div>Перейти к расширенному текстовому редактору</div></a>
Вместо "URL вашего форума/h#-page" должен быть вставлен адрес HTML-страницы вашего форума, где вы разместили текстовый редактор в соответствии с предыдущим пунктом (№2). Сохраните (ОК).

Код стиля CSS

Затем в ПА->Оформление->Картинки и цвета->Цвета->Каскадная таблица стилей CSS вставьте такой код (Код №6):
Код:
/* иконка bb-кнопки Редактор*/
a.sceditor-button.sceditor-button-alteditor div {
background: transparent url(http://zverev-dm.narod.ru/Infoportal/Pict/16/richtext_editor.png) no-repeat center;
opacity:1 !important;
filter:alpha(opacity=100) !important;  
}

Вместо изображения для кнопки редактора http://zverev-dm.narod.ru/Infoportal/Pict/16/richtext_editor.png, которое расположено на моем сайте на Ucos'е, вы можете взять свое и разместить его на бесплатном хостинге изображений. Для этого можете использовать вот этот обширный набор пиктограмм http://my-files.ru/1h7j3f
Сохраните результат (нажмите ОК).
Всё. Можете пользоваться.

Добавление ссылки на страницу альтернативного текстового редактора внизу страницы

Зайдите в ПА->Модули->Ссылки внизу страницы->Конфигурация и укажите в пункте "Активировать ссылки в нижней части форума:" - "Да". Затем в списке "Ссылки внизу страницы" нажмите на плюсик и добавьте "Название:" - "Текстовый редактор"; "Анкор/текст ссылки:" - "Текстовый редактор"; "Параметр title:" - "Текстовый редактор"; "URL ссылки:" - "URL вашего форума/h#-page" с адресом страницы, где вы разметили редактор; "Nofollow:" - "Нет"; "Открывать в новом окне:" - "Да". Нажмите "Сохранить".

Конструирование текстового редактора по вашему усмотрению добавлением плагинов

Пройдите по ссылке https://ckeditor.com/builder
Сконструируйте себе такой текстовый, какой вы хотите. Итоговый результат вы получите в виде zip-файла с кодами библиотеки редактора после нажатия на кнопку внизу страницы Download CKEditor. Сохраните zip-файл с редактором к себе на компьютер, распакуйте (он распакуется в папку ckeditor). Очень рекомендую не превышать размер папки в 10 Мб, иначе редактор может зависать и не загружаться. Разместите папку ckeditor в папке "public_html" на любом бесплатном FTP-хостинге. Например, https://free.beget.ru/ru, http://100ms.ru/ или http://free.sprinthost.ru
Теперь в ПА->Модули->Управление страницами HTML найдите свою страницу с альтернативным текстовым редактором, нажмите знак шестеренки для правки кода и в самом начале кода вместо

Код:
<script src="//cdn.ckeditor.com/4.7.2/full/ckeditor.js"></script>

вставьте

Код:
<script src="http://URL к содержимому папки public_html вашего хостинга/ckeditor/ckeditor.js"></script>

Больше ничего изменять не надо!

Нажмите "Сохранить".

Теперь ваш текстовый редактор будет брать свои настройки из папки с библиотеками и плагинами, которую вы разместили на своем (бесплатном) хостинге.

Поэкспериментировав немного с плагинами, вы сможете идеально настроить интерфейс текстового редактора под ваши нужды. Вы сможете добавить расширенный интерфейс под добавлению мультимедиа, подкастов, диаграмм, смайликов, графити, автосохранения содержимого, редактор формул, добавление специальных символов и знаков, элементы управления форм и так далее.

Можете воспользоваться и моей библиотекой с настройками

Код:
<script src="//u90354gf.beget.tech/ckeditor/ckeditor.js"></script>

Удачи!
Дмитрий Зверев
Дмитрий Зверев
 

Сообщения : 190
Возраст : 55
Регистрация : 2016-02-15
Благодарности : 22

Без предупреждений

http://marketologi.forum2x2.ru/

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения