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

InstantCMS 2.X

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

#1 28 августа 2019 в 07:59
Доброго времени суток. Появилась необходимость вставки заготовленного кода через кнопку в Imperavi Redactorе. Т.е в панели редактора добавить кнопку чтоб при клике на нее в место курсора вставился заранее подготовленный код карточки. Пример на скрине



Код по умолчанию при клике
  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> втсал, но как добавить свою?..
#2 28 августа 2019 в 09:29

или подсказать где и что можно подглядеть

Clear

Может быть здесь, что то найдете
imperavi.com/redactor/examples/
#3 28 августа 2019 в 11:18
Clear,
Года два назад делал кому-то плагин для вставки своего дива в имперави.
Посмотрите, может чем поможет:
/users/files/download6642.html
#4 29 августа 2019 в 21:53
Ris,
Огромное тебе спасибо, сильно помог, для теста я пока сделал так

  1. if (!RedactorPlugins) var RedactorPlugins = {};
  2.  
  3. RedactorPlugins.card = {
  4.  
  5. init: function () {
  6. var button = this.buttonAddAfter('fontcolor','card', 'CARD', $.proxy(this.insert, this));
  7. this.callback(button, this.insert);
  8. },
  9.  
  10.  
  11.  
  12. insert: function () {
  13.  
  14. content = this.getSelectionHtml();
  15.  
  16. card = '<div style="float: left;">' + 'ТЕкст' + '</div>';
  17.  
  18. this.insertHtmlAdvanced(card);
  19.  
  20. }
  21. };
Он выводит то что прописано, НО, почему то создает внутри тега абзаца <p>
  1. <p>
  2. <div style="float: left;">
  3. ТЕкст
  4. </div>
  5. </p>
Тег <p> мне не нужно втавлять. Подозреваю что нужно изменить this.getSelectionHtml(); или this.insertHtmlAdvanced(card);
Тут не подскажете как верно ?
Скрин кнопки
#5 29 августа 2019 в 21:59
Просто такие произвольные коды реально сильно облегчат жизнь редакторам, да тот же класс можно уже подготовить в выпадающем списке чтобы не писать постоянно, и заготовки карточек разных
#6 29 августа 2019 в 22:19
Clear,
Версия InstantCMS какая?
#7 29 августа 2019 в 22:28

Тег <p> мне не нужно втавлять. Подозреваю что нужно изменить this.getSelectionHtml(); или this.insertHtmlAdvanced(card);

Clear

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

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

То есть он рассматривает Вашу вставку, как новый абзац, и автоматически прописывает <p>
#8 29 августа 2019 в 22:44

Не знаю можно ли это изменить программно, для этого отдельного случая.

Rainbow
Можно изменить программно.
Причем начиная с 2.12 это можно сделать прямо в админке.
Если версия старее — можно дописать опцию в \wysiwyg\redactor\wysiwyg.class.php
Я почему и спрашиваю версию движка.
#9 29 августа 2019 в 22:55

Причем начиная с 2.12 это можно сделать прямо в админке.

Ris
"Так вот для чего эта штука shock, а я дурак ей орехи колол..."©
smile
#10 30 августа 2019 в 07:02

Версия InstantCMS какая?

Ris
Версия последняя, 2,12. А вообще принцип добавления кнопки довольно прост, но при обнове будут перетираться два файла, их придется править, но это не проблема. Вся редакция происходит внутри
/wysiwyg/redactor

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

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


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


Это вроде все
#11 30 августа 2019 в 07:20

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

Rainbow
Да можно, но я пока не понял ка. Тег <hr> втсаляется без P, значит и это можно сделать так же в выводе.
  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. },
А я вывожу так
  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(); Я незнаю. Подскажите кто знает пожалуйста.
#12 30 августа 2019 в 07:52
Собственно если кому надо можете скачать у меня в файлах и поправить под себя. Напоминаю два файла заменяются, но они не повлияют на работу редактора, Можете не заменять а дописать сами в своих файлах Стиль и подключение плагина
Архив с плагином.
/users/files/download7365.html

Ну и для тех кому лень прописывать стили, добавите в свой CSS
  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. }
#13 26 сентября 2019 в 13:42
А кто подскажет как настраивается поле "Описание" в типах контента, там тоже редактор, тоже хочу, чтобы 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'
});

Но как это передать в этот объект? Помогите пожалуйста!!!
#14 26 сентября 2019 в 14:33

А кто подскажет как настраивается поле "Описание" в типах контента, там тоже редактор, тоже хочу, чтобы DIV не заменялся на P. Есть знатоки как сделать?

Sergon
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.