Как в редактор redactor добавить свой span с классом?

InstantCMS 2.X

#1 2 июля 2018 в 22:56

Привет, друзья!
Возможно ли как то расширить редактор своими классами? Если да, то как

#2 3 июля 2018 в 13:51

Возможно ли как то расширить редактор своими классами? Если да, то как
yury

Непонятна задача. Нужно добавить какие-то стили в редактор или нужна новая кнопка?

#3 3 июля 2018 в 19:27

Нужно добавить какие-то стили в редактор или нужна новая кнопка?
Ris

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

Сегодня в 03:43

#4 3 июля 2018 в 20:44

yury,
Нужно сделать плагин.
Например взять плагин спойлера с гитхаба и слегка доработать.

#5 4 июля 2018 в 15:19

yury,
Нужно сделать плагин.
Например взять плагин спойлера с гитхаба и слегка доработать.

Ris

можно пример плагина на гите?

#6 4 июля 2018 в 16:17

можно пример плагина на гите?
yury

github.com/instantsoft/icms2/tree/master/wysiwyg/redactor/files/plugins/spoiler

#7 5 июля 2018 в 18:29

можно пример плагина на гите?
yury
github.com/instantsoft/icms2/tree/master/wysiwyg/redactor/files/plugins/spoiler

Ris

только добавлением скрипта видимо не обойтись. еще надо редактировать файл redactor.js

#8 5 июля 2018 в 19:18

Пытался так сделать

 
if (!RedactorPlugins) var RedactorPlugins = {};
 
RedactorPlugins.span = {
	init: function ()
	{
		var fonts = [ 'marked' ];
		var that = this;
		var dropdown = {};
 
		$.each(fonts, function(i, s)
		{
			dropdown['s' + i] = { title: s, callback: function() { that.setSpan(s); }};
		});
 
		dropdown['remove'] = { title: this.opts.curLang['remove_font'], callback: function() { that.resetSpan(); }};
 
		this.buttonAdd('span', this.opts.curLang['span'], false, dropdown);
	},
	setSpan: function (value)
	{
		this.inlineSetClass('marked', value);
	},
	resetSpan: function()
	{
		this.inlineRemoveClass('marked');
	}
};

т.е задача была сделать span class="marked"

#9 5 июля 2018 в 23:02

еще надо редактировать файл redactor.js
yury

Еще надо редактировать файл \wysiwyg\redactor\wysiwyg.class.php

#10 6 июля 2018 в 20:12

еще надо редактировать файл redactor.js
yury
Еще надо редактировать файл \wysiwyg\redactor\wysiwyg.class.php

Ris

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

#11 6 июля 2018 в 21:24

yury,
Вы лучше скажите, какой спан надо добавлять к выделенному контенту.

#12 6 июля 2018 в 22:05

yury,
Вы лучше скажите, какой спан надо добавлять к выделенному контенту.

Ris

т.е задача была сделать span class="marked"

#13 6 июля 2018 в 22:44

yury,
Понятно.
Но Вы пытаетесь присвоить объекту this класс marked.
Вы понимаете, что this — это весь html страницы? Надо сначала изъять выделенный html

content = this.getSelectionHtml();

А потом его обвести в спан и вставить обратно.

span = '<span class="marked">'+content+'</span>';
this.insertHtmlAdvanced(span);

#14 6 июля 2018 в 23:04

yury,
Понятно.
Но Вы пытаетесь присвоить объекту this класс marked.
Вы понимаете, что this — это весь html страницы? Надо сначала изъять выделенный html
content = this.getSelectionHtml();
А потом его обвести в спан и вставить обратно.
span = ''+content+'';
this.insertHtmlAdvanced(span);
Ris

а можете на моем примере конечный результат показать? не очень понимаю(

#15 6 июля 2018 в 23:10

а можете на моем примере конечный результат показать?
yury

Пока не могу.
Я в отпуске и тот ноут, что есть под рукой, не позволяет установить некоторые инструменты.
Посмотрю после 16-го.

Ответы на комментарий в форме

Виджет "Список пользователей"

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

Как в редактор redactor добавить свой span с классом?

Похожие темы

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

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

[ЕСТЬ РЕШЕНИЕ] Три вопроса по REDACTOR'у

Что за функции в редакторе Redactor?

Про языковую локализацию редактора redactor

[ЕСТЬ РЕШЕНИЕ] Настройка редактора redactor

InstantCMS Team

О проекте

Поддержка

Дополнения