1 (2014-09-05 08:05:52 отредактировано bigperson)

Тема: RedactorJS от Imperavi

RedactorJS от Imperavi
Отличный WYSIWYG редактор
http://f6.s.qip.ru/lA1oX3Ss.png
Собрал на скорую руку плагин.

К сожалению редактор платный, для использования с чистой душой приобретите лицензию, тут выкладываю для ознакомительных целей :-) http://imperavi.com/redactor/ (там же можно посмотреть демо)

Из приятного:

  • Работает загрузка картинок, все загруженные картинки записываются в json массив, можно удобно выбирать, по умолчанию картинки сжимаются до 750 px по ширине (превью 100х72), хранятся в public/uploads/img/

  • Работает загрузка файлов, хранятся public/uploads/files/

Все настройки хранятся в redactorjs.plugin.php, документация на официальном сайте http://imperavi.com/redactor/docs/

Изменить размер картинок можно в /plugins/redactorjs/redactorjs/plugins/uploads/image_upload.php

Для установки копируется в папку plugins, и инсталлируете в админке, предварительно удалив MarkItUp!

UPD: 05.09.2014
Обновил до последней версии:
- Исправил мелкие баги (большинство описано в этой теме);
- Добавил кнопку {cut}, используется иконка от Font Awesome, при желании можете изменить на любую свою, правится в cut.js;
- Обновил исходный код RedactorJS (источник https://github.com/yiiext/imperavi-redactor-widget);
- По умолчанию добавил настройки paragraphy: false, autoresize: false;
- Проверил на версии 3.0.1 багов не замечено.

Скачать: https://yadi.sk/d/DfrLfDVDb55qs

Поделиться

2

Re: RedactorJS от Imperavi

Спасибо!!! smile
потестим

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

3

Re: RedactorJS от Imperavi

а откуда исходники у Вас?

Site | GitHub | Создание форумов/решений на базе PunBB/Monstra/OGMA

Плагины распространяются по Creative Commons Attribution-NonCommercial 3.0

Сайт KANekT

Поделиться

4

Re: RedactorJS от Imperavi

в файле redactor.css
после 122 ой строки вставьте это:

  min-height: 200px;

а то редактор если пустой то он там буквально в высоту 20 пикселей, напрягает smile

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

5

Re: RedactorJS от Imperavi

Очень не удобно, что при большом количестве информации - уходит вверх панель управления

Спасибо говорим плюсиком в репутацию. Так виднее smile

Поделиться

6

Re: RedactorJS от Imperavi

sergeyterr пишет:

Очень не удобно, что при большом количестве информации - уходит вверх панель управления

выложи скрин, пофиксим надеюсь smile

п\с очень понравился этот редактор

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

7

Re: RedactorJS от Imperavi

http://photoload.ru/data/6e/3d/c1/6e3dc13f2c2c6a8dcae257e330713c11_pv.jpg
http://photoload.ru/data/13/d8/c2/13d8c2eabd038c36a3bb3950eb2bb856_pv.jpg

Спасибо говорим плюсиком в репутацию. Так виднее smile

Поделиться

8

Re: RedactorJS от Imperavi

на хостинге возникла проблема с этим редактором, не отображается после переноса с локалки вообще не на каких страницах
в консоле пишет вот что:

TypeError: $(...).redactor is not a function index.php:22
<script>$(function(){$("#editor_area").redactor({lang: "ru",imageUpload: "/plugins/redactorjs/redactorjs/plugins/uploads/image_upload.php",   fileUpload: "/plugins/redactorjs/redactorjs/plugins/uploads/file_upload.php",imageGetJson: "/public/uploads/img/imageslist.json"});});</script>

матерится на строчку выше, есть идеи?

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

9

Re: RedactorJS от Imperavi

пфффф нашел решение.... у кого такая же проблема  в файле
redactorjs.plugin.php сменить это:

<!-- RedactorJs! 9.2 -->
<script type="text/javascript" src="'.Option::get('siteurl').'plugins/RedactorJs/RedactorJs/redactor.min.js"></script>
<!-- RedactorJs! langs -->
<script type="text/javascript" src="'.Option::get('siteurl').'plugins/RedactorJs/RedactorJs/lang/ru.js"></script>
<!-- RedactorJs! skin -->
<link rel="stylesheet" type="text/css" href="'.Option::get('siteurl').'plugins/RedactorJs/RedactorJs/redactor.css" />

на вот это:

<!-- RedactorJs! 9.2 -->
<script type="text/javascript" src="'.Option::get('siteurl').'plugins/redactorjs/redactorjs/redactor.min.js"></script>
<!-- RedactorJs! langs -->
<script type="text/javascript" src="'.Option::get('siteurl').'plugins/redactorjs/redactorjs/lang/ru.js"></script>
<!-- RedactorJs! skin -->
<link rel="stylesheet" type="text/css" href="'.Option::get('siteurl').'plugins/redactorjs/redactorjs/redactor.css" />

и обязательно чтобы присутствовал файл .htaccess с кодом

Options -Indexes
Allow from all

в папке plugins/redactorjs/redactorjs/

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

10

Re: RedactorJS от Imperavi

sergeyterr пишет:

Очень не удобно, что при большом количестве информации - уходит вверх панель управления

можно в файле redactorjs.plugin.php подключить плагин редактора fullscreen:

<script type="text/javascript" src="'.Option::get('siteurl').'plugins/RedactorJs/RedactorJs/plugins/fullscreen/fullscreen.js"></script>

и в самом скрипте редактора ниже строчки

 echo ('<script>$(function(){$("#editor_area").redactor({

добавить

plugins: ["fullscreen"],

Поделиться

11

Re: RedactorJS от Imperavi

А никто не подскажет как можно убрать самопроизвольно вставляющиеся <p></p> везде где не поподя? не удобно когда тебе нужно вставить именно html код, который после сохранения берет и дополняется тегами, которые совершенно не нужны

Поделиться

12

Re: RedactorJS от Imperavi

по аналогии в выше указанном сообщении, необходимо добавить paragraphy: false
в теории должно помочь.

Поделиться

13

Re: RedactorJS от Imperavi

Если нужно в панель редактора добавить новую кнопку, например cut для статей, то в папке plugins создаем папку cut, кидаем туда скрипт cut.js  со содержимым:

if (!RedactorPlugins) var RedactorPlugins = {};
        
RedactorPlugins.cut = {
    init: function ()
    {
        this.buttonAdd('cut', 'Подробнее..', this.testButton);
    },
        testButton: function(buttonName, buttonDOM, buttonObj, e)
    {
        this.insertHtml('{cut}');
   }
 };

еще 2 картинки для кнопки панели: cut-hover.png и cut.png (нарисуйте в фотошопе), далее прописываем в файле redactorjs.plugin.php путь к скрипту

<!-- RedactorJs! plugins -->
              <script type="text/javascript" src="'.Option::get('siteurl').'plugins/redactorJs/redactorJs/plugins/cut/cut.js"></script>

и там-же добавляем после

 echo ('<script>$(function(){$("#editor_area").redactor({

это

plugins: ["cut"],

теперь осталось прописать в файле redactor.css путь к картинкам кнопки

.redactor_toolbar li a.re-cut {
    background-image: url(/plugins/redactorJs/redactorJs/plugins/cut/cut.png);
}
.redactor_toolbar li a.re-cut:hover {
    background-image: url(/plugins/redactorJs/redactorJs/plugins/cut/cut-hover.png);
}

Поделиться

14

Re: RedactorJS от Imperavi

В версии 3.0 не работает? У меня не получилось.

Поделиться

15

Re: RedactorJS от Imperavi

UPD: 05.09.2014
Обновил до последней версии:
- Исправил мелкие баги (большинство описано в этой теме);
- Добавил кнопку {cut}, используется иконка от Font Awesome, при желании можете изменить на любую свою, правится в cut.js;
- Обновил исходный код RedactorJS (источник https://github.com/yiiext/imperavi-redactor-widget);
- По умолчанию добавил настройки paragraphy: false, autoresize: false;
- Проверил на версии 3.0.1 багов не замечено.

Скачать: https://yadi.sk/d/DfrLfDVDb55qs

Поделиться

16

Re: RedactorJS от Imperavi

Проверено, работает!

Поделиться

17

Re: RedactorJS от Imperavi

Можете помочь? Никак не пойму, если у меня есть форич, который выводит неизвестное количество блоков с редактором, как использовать один тулбар? Документация какая то странная, есть возможность вынести тулбар, подключить скрипт к формам с одним классам, использовать несколько форм на одной стр. Но тулбар взаимодействует только с последним блоком, как так? Безумие какое то.
Спасибо!

Поделиться

18

Re: RedactorJS от Imperavi

скрин можно? чет я нечего не понял...

плагин МаркДаун кстати создает проблемы в сочетании с этим редактором и Блоками от монстры, я его удаляю всегда

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

19 (2015-07-04 16:57:27 отредактировано valentin)

Re: RedactorJS от Imperavi

Да что скрин, вот по коду,
идет вывод текстовых полей и создаем див с ид toolbar-layer с настройками (toolbarExternal: '#toolbar-layer',)

<div id="toolbar-layer" class="container"></div>
    <div id="op" class="container">
        <textarea class="content" name="content"></textarea>
        <br>
        <textarea class="content" name="content"></textarea>
</div>

при запуске, тулбар работает только с последним textarea и формирует redactor-toolbar-1, как мне быть?

Хочу сразу извиниться, вашей системой не пользуюсь. Просто встретился с данной проблемой и этим редактором, не знаю куда еще обратиться. делаю проект на ангуляре. Это ничего страшного?

Поделиться

20

Re: RedactorJS от Imperavi

valentin пишет:

Да что скрин, вот по коду,
идет вывод текстовых полей и создаем див с ид toolbar-layer с настройками (toolbarExternal: '#toolbar-layer',)

<div id="toolbar-layer" class="container"></div>
    <div id="op" class="container">
        <textarea class="content" name="content"></textarea>
        <br>
        <textarea class="content" name="content"></textarea>
</div>

при запуске, тулбар работает только с последним textarea и формирует redactor-toolbar-1, как мне быть?

Хочу сразу извиниться, вашей системой не пользуюсь. Просто встретился с данной проблемой и этим редактором, не знаю куда еще обратиться. делаю проект на ангуляре. Это ничего страшного?

O_O возможно ваша Цмс создает вам проблемы, попробуйте на монстре потестить, у вас займет 5 минут smile

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

21 (2015-07-04 22:57:46 отредактировано valentin)

Re: RedactorJS от Imperavi

ни кто проблем не создает, я попробовал на отдельном html шаблоне сделать, не могу поверить, что в данном скрипте нету такой возможности (использовать вынесенный тулбар для всех форм с контентом - редактором). Попробуйте сами, несколько редакторов на одной стр, привязать отдельный тулбар и привязать его ко всем =\
p.s. конечно заходил на ваш проект, но там не было нужного мне примере. когда блоки с контентом идут вместе.

Поделиться

22

Re: RedactorJS от Imperavi

не получается так же?

Поделиться

23

Re: RedactorJS от Imperavi

valentin пишет:

не получается так же?

я не понял, вы хотите 2 редактора на одной странице правильно?

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

24

Re: RedactorJS от Imperavi

я вот не пойму, почему не пишет <br /> ?

Поделиться

25

Re: RedactorJS от Imperavi

http://www.wysibb.com/ может кому пригодиться

Поделиться