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

InstantCMS 2.X

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

#1 28 августа 2019 в 07:59

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

Код по умолчанию при клике

<div class="card">
  <div class="card-img"> <img src="/upload/default.png" title="" alt=""> </div>
  <div class="card-txt">
    <h3>Заголовок</h3>
    <p>Описание</p>
    <p><a href="#">Подробнее</a></p>
  </div>
</div>

Кто нибудь может помочь в реализации подобного функционала или подсказать где и что можно подглядеть (кое что могу сам crazy

). Через плагин или как то подругому я незнаю, Но очень надо. Т.к. при добавлении новостей часто нужно вставлять в текст какую нибудь карточку, а прописывать постоянно теги занимает много времени, а тут заменил заголовок, картинку и текст, готово.

Ясно что можно сделать по аналогии кнопки "Горизонтальная линейка". Поставил курсор клинкул и тег <hr> втсал, но как добавить свою?..

Рабочий проект NEURO-AI.ru

#2 28 августа 2019 в 09:29

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

Может быть здесь, что то найдете
imperavi.com/redactor/examples/

#3 28 августа 2019 в 11:18

Clear,
Года два назад делал кому-то плагин для вставки своего дива в имперави.
Посмотрите, может чем поможет:
/users/files/download6642.html

Сегодня в 21:51

#4 29 августа 2019 в 21:53

Ris,
Огромное тебе спасибо, сильно помог, для теста я пока сделал так

КОД

if (!RedactorPlugins) var RedactorPlugins = {}; 
 
RedactorPlugins.card = {
 
	init: function () {
				var button = this.buttonAddAfter('fontcolor','card', 'CARD', $.proxy(this.insert, this));
				this.callback(button, this.insert);				 
	},
 
 
 
	insert: function () {
 
			content = this.getSelectionHtml();				
 
			card = '<div style="float: left;">' + 'ТЕкст' + '</div>';					
 
				this.insertHtmlAdvanced(card);
 
			}
};

Он выводит то что прописано, НО, почему то создает внутри тега абзаца <p>

<p>
	<div style="float: left;">
		ТЕкст
	</div>
</p>

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

Рабочий проект NEURO-AI.ru

#5 29 августа 2019 в 21:59

Просто такие произвольные коды реально сильно облегчат жизнь редакторам, да тот же класс можно уже подготовить в выпадающем списке чтобы не писать постоянно, и заготовки карточек разных

Рабочий проект NEURO-AI.ru

#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

Ris

Причем начиная с 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

Это вроде все

Рабочий проект NEURO-AI.ru

#11 30 августа 2019 в 07:20

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

Да можно, но я пока не понял ка. Тег <hr> втсаляется без P, значит и это можно сделать так же в выводе.

cleanEmpty: function(html)
		{
			var ph = this.placeholderStart(html);
			if (ph !== false) return ph;
 
			if (this.opts.linebreaks === false)
			{
				if (html === '') html = this.opts.emptyHtml;
				else if (html.search(/^<hr\s?\/?>$/gi) !== -1) html = '<hr>' + this.opts.emptyHtml;
			}
 
			return html;
		},

А я вывожу так

insert: function () {
 
			content = this.getSelectionHtml();				
 
			card = '<div style="float: left;">' + 'ТЕкст' + '</div>';					
 
				this.insertHtmlAdvanced(card);
 
			}

Вот тут видимо нужно изменить this.insertHtmlAdvanced(card); или content = this.getSelectionHtml(); Я незнаю. Подскажите кто знает пожалуйста.

Рабочий проект NEURO-AI.ru

#12 30 августа 2019 в 07:52

Собственно если кому надо можете скачать у меня в файлах и поправить под себя. Напоминаю два файла заменяются, но они не повлияют на работу редактора, Можете не заменять а дописать сами в своих файлах Стиль и подключение плагина
Архив с плагином.
/users/files/download7365.html

Ну и для тех кому лень прописывать стили, добавите в свой CSS

/*Карточка*/
.card-img { width:105px; height:105px; float:left; margin-right:25px; border:2px dotted #336699; border-radius:50%; padding:10px; overflow:hidden;position: relative;}
.card-img img{position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; max-width:100px;}
.card-txt {margin-left:150px; padding: 10px; background: #e5eef7;}
.card-txt h3{margin:0;}
.card-txt p{ margin-top:0}
.card-txt p a{ color:#FFF; background: #336699; padding:6px; margin: 0 auto;; text-decoration:none}
 
@media screen and (max-width: 426px) {
.card { text-align:center}
.card-img {float: none; margin:0 auto; padding:10px; position: relative;}
.card-txt {margin: 5px auto;}
}

Рабочий проект NEURO-AI.ru

#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

Спойлер

Закрывающий тег html на страни

Нужна подсказка (реализация вы

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

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

Похожие темы

Как заставить "Imperavi Redactor" загружать картинки из буфера обмена?

Пропадает Визуальный редактор текста Redactor

Нет перевода строки после видео в Redactor + прилипают видео

Zshorts шорткоды

iVideo и шортсы

[ЗАКРЫТО] Какой шорткод для вставки дополнений?

InstantCMS Team

О проекте

Поддержка

Дополнения