Свой шорт-код в Imperavi Redactor 2.X

Как добавить кнопку в панель Redactorа для вставки своего кода

 
Посетитель
small user social cms
Медаль
Сообщений: 631
Доброго времени суток. Появилась необходимость вставки заготовленного кода через кнопку в Imperavi Redactorе. Т.е в панели редактора добавить кнопку чтоб при клике на нее в место курсора вставился заранее подготовленный код карточки. Пример на скрине

Свой шорт-код в Imperavi Redactor

Код по умолчанию при клике
Код PHP:
  1. <div class="card">
  2. <div class="card-img"> <img src="/upload/default.png" title="" alt=""> </div>
  3. <div class="card-txt">
  4. <h3>Заголовок</h3>
  5. <p>Описание</p>
  6. <p><a href="#">Подробнее</a></p>
  7. </div>
  8. </div>
Кто нибудь может помочь в реализации подобного функционала или подсказать где и что можно подглядеть (кое что могу сам crazy ). Через плагин или как то подругому я незнаю, Но очень надо. Т.к. при добавлении новостей часто нужно вставлять в текст какую нибудь карточку, а прописывать постоянно теги занимает много времени, а тут заменил заголовок, картинку и текст, готово.

Ясно что можно сделать по аналогии кнопки "Горизонтальная линейка". Поставил курсор клинкул и тег <hr> втсал, но как добавить свою ?...
Редактировалось: 1 раз (Последний: 28 августа 2019 в 08:08)
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1991
Clear:
или подсказать где и что можно подглядеть

Может быть здесь, что то найдете
https://imperavi.com/redactor/examples/
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2943
Clear,
Года два назад делал кому-то плагин для вставки своего дива в имперави.
Посмотрите, может чем поможет:
https://instantcms.ru/users/files/download6642.html
Посетитель
small user social cms
Медаль
Сообщений: 631
Ris,
Огромное тебе спасибо, сильно помог, для теста я пока сделал так

КОД
Он выводит то что прописано, НО, почему то создает внутри тега абзаца <p>
Код PHP:
  1. <p>
  2. <div style="float: left;">
  3. ТЕкст
  4. </div>
  5. </p>
Тег <p> мне не нужно втавлять. Подозреваю что нужно изменить this.getSelectionHtml(); или this.insertHtmlAdvanced(card);
Тут не подскажете как верно ?
Скрин кнопки
Свой шорт-код в Imperavi Redactor
Редактировалось: 2 раз (Последний: 29 августа 2019 в 21:57)
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
Медаль
Сообщений: 631
Просто такие произвольные коды реально сильно облегчат жизнь редакторам, да тот же класс можно уже подготовить в выпадающем списке чтобы не писать постоянно, и заготовки карточек разных
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2943
Clear,
Версия InstantCMS какая?
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1991
Clear:
Тег <p> мне не нужно втавлять. Подозреваю что нужно изменить this.getSelectionHtml(); или this.insertHtmlAdvanced(card);

Не знаю можно ли это изменить программно, для этого отдельного случая.
НО у имперави в его настройках (в redactor.js) выставляется во что будет по умолчанию заключен абзац (можно P, можно DIV):

https://imperavi.com/redactor/docs/settings/formatting/

То есть он рассматривает Вашу вставку, как новый абзац, и автоматически прописывает <p>
Редактировалось: 3 раз (Последний: 29 августа 2019 в 22:36)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2943
Rainbow:
Не знаю можно ли это изменить программно, для этого отдельного случая.
Можно изменить программно.
Причем начиная с 2.12 это можно сделать прямо в админке.
Если версия старее - можно дописать опцию в \wysiwyg\redactor\wysiwyg.class.php
Я почему и спрашиваю версию движка.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1991
Ris
Посетитель
small user social cms
Медаль
Сообщений: 631
Ris:
Версия InstantCMS какая?
Версия последняя, 2,12. А вообще принцип добавления кнопки довольно прост, но при обнове будут перетираться два файла, их придется править, но это не проблема. Вся редакция происходит внутри
/wysiwyg/redactor
Свой шорт-код в Imperavi Redactor

1. Создается папка и файл плагина в директрориях /wysiwyg/redactor/files/plugins/
Свой шорт-код в Imperavi Redactor

2. Подключается плагин в файле /wysiwyg/redactor/wysiwyg.class.php
Свой шорт-код в Imperavi Redactor


3. Стилизуем кнопку иконкой или текстом как угодно в файле /wysiwyg/redactor/files/redactor.css
Свой шорт-код в Imperavi Redactor

Это вроде все
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
Медаль
Сообщений: 631
Rainbow:
Не знаю можно ли это изменить программно, для этого отдельного случая.
НО у имперави в его настройках (в redactor.js) выставляется во что будет по умолчанию заключен абзац (можно P, можно DIV):
Да можно, но я пока не понял ка. Тег <hr> втсаляется без P, значит и это можно сделать так же в выводе.
Код PHP:
  1. cleanEmpty: function(html)
  2. {
  3. var ph = this.placeholderStart(html);
  4. if (ph !== false) return ph;
  5.  
  6. if (this.opts.linebreaks === false)
  7. {
  8. if (html === '') html = this.opts.emptyHtml;
  9. else if (html.search(/^<hr\s?\/?>$/gi) !== -1) html = '<hr>' + this.opts.emptyHtml;
  10. }
  11.  
  12. return html;
  13. },
А я вывожу так
Код PHP:
  1. insert: function () {
  2.  
  3. content = this.getSelectionHtml();
  4.  
  5. card = '<div style="float: left;">' + 'ТЕкст' + '</div>';
  6.  
  7. this.insertHtmlAdvanced(card);
  8.  
  9. }
Вот тут видимо нужно изменить this.insertHtmlAdvanced(card); или content = this.getSelectionHtml(); Я незнаю. Подскажите кто знает пожалуйста.
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
Медаль
Сообщений: 631
Собственно если кому надо можете скачать у меня в файлах и поправить под себя. Напоминаю два файла заменяются, но они не повлияют на работу редактора, Можете не заменять а дописать сами в своих файлах Стиль и подключение плагина
Архив с плагином.
https://instantcms.ru/users/files/download7365.html

Ну и для тех кому лень прописывать стили, добавите в свой CSS
Код PHP:
  1. /*Карточка*/
  2. .card-img { width:105px; height:105px; float:left; margin-right:25px; border:2px dotted #336699; border-radius:50%; padding:10px; overflow:hidden;position: relative;}
  3. .card-img img{position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; max-width:100px;}
  4. .card-txt {margin-left:150px; padding: 10px; background: #e5eef7;}
  5. .card-txt h3{margin:0;}
  6. .card-txt p{ margin-top:0}
  7. .card-txt p a{ color:#FFF; background: #336699; padding:6px; margin: 0 auto;; text-decoration:none}
  8.  
  9. @media screen and (max-width: 426px) {
  10. .card { text-align:center}
  11. .card-img {float: none; margin:0 auto; padding:10px; position: relative;}
  12. .card-txt {margin: 5px auto;}
  13. }
Редактировалось: 1 раз (Последний: 30 августа 2019 в 08:02)
Проверка траста и спама с донорских сайтов.
Посетитель
small user social cms
Сообщений: 26
А кто подскажет как настраивается поле "Описание" в типах контента, там тоже редактор, тоже хочу , чтобы DIV не заменялся на P. Есть знатоки как сделать?
В документации как я понимаю это вот этот параметр:
markup#
Type: String
Default: p
By default Redactor creates paragraph on the enter key pressed. You can change it:
$R('#content', {
markup: 'div'
});

Но как это передать в этот объект? Помогите пожалуйста!!
Редактировалось: 2 раз (Последний: 26 сентября 2019 в 13:53)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2943
Sergon:
А кто подскажет как настраивается поле "Описание" в типах контента, там тоже редактор, тоже хочу , чтобы DIV не заменялся на P. Есть знатоки как сделать?
Спойлер
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.