Foren / National / Russian / Тех. поддержка / [Fixed] Не отображается CKeditor, если у textarea более 1 класса

Edward
#1 26. Oktober 2015, 03:49

Столкнулся с проблемой описанной в заголовке. У меня в шаблоне page.edit.tpl используется тема на bootstrap и имеется несколько textarea такого вида


<textarea class="editor form-control" rows="3"></textarea>

Решил проблему поправив файлик plugins/ckeditor/presets/ckeditor.default.set.js

/*
 * Default CKEditor preset and connector
 */

var ckeditorClasses = [
				  ['editor','Full'], // textarea class, editor toolbar size
				  ['medieditor','Medium'],
				  ['minieditor','Basic']
				 ];

function hasClass(el, selector) {
	var className = " " + selector + " ";
  , 
	if ((" " + el.className + " ").replace(/[\n\t]/g, " ").indexOf(className) > -1) {
    	return true;
	}
return false;
}

function ckeditorReplace() {
	var textareas = document.getElementsByTagName('textarea');
	for (var i = 0; i < textareas.length; i++) {
		
		if (hasClass(textareas[i], ckeditorClasses[0][0]) || hasClass(textareas[i], ckeditorClasses[1][0]) || hasClass(textareas[i], ckeditorClasses[2][0])) {
			var textareasStyle = getComputedStyle(textareas[i], null) || textareas[i].currentStyle;
			if (hasClass(textareas[i], ckeditorClasses[0][0])) { var toolbars = ckeditorClasses[0][1] }
			if (hasClass(textareas[i], ckeditorClasses[1][0])) { var toolbars = ckeditorClasses[1][1] }
			if (hasClass(textareas[i], ckeditorClasses[2][0])) { var toolbars = ckeditorClasses[2][1] }
			CKEDITOR.replace(textareas[i], {height:textareasStyle.height, width:'100%', toolbar: toolbars});
		}
	}
}

if (typeof jQuery == 'undefined') {
	if (window.addEventListener) {
		window.addEventListener('load', ckeditorReplace, false);
	} else if (window.attachEvent) {
		window.attachEvent('onload', ckeditorReplace);
	} else {
		window.onload = ckeditorReplace;
	}
} else {
	$(document).ready(ckeditorReplace);
	ajaxSuccessHandlers.push(ckeditorReplace);
}

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

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Dieser Beitrag wurde von Macik (am 31. Oktober 2015, 16:40, vor 8 Jahre) bearbeitet
esclkm
#2 26. Oktober 2015, 09:04

вообще странное событие - у меня на форме всегда нормально обрабатывалось несколько скэдиторов.

что показывает лог консоли?

littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Macik
#3 26. Oktober 2015, 10:07

Паша, речь не о количестве редакторов на странице, а о количестве классов у элемента `textarea`.

Там действительно код не предусмативает возможности указать несколько классов. 

2Edward — откройте на ГитХабе заявку, с указанием ссылки на эту тему.

И проверьте у себя вот такой код:
 

function ckeditorReplace() {
	var textareas = document.getElementsByTagName('textarea');
	for (var i = 0; i < textareas.length; i++) {
		var classStr = textareas[i].getAttribute('class');
		if (classStr) {
			var classes = classStr.split(" ");
			for (var k = 0; k < classes.length; k++) {
				textareaClass = classes[k];
				if (ckeditorClasses[textareaClass] !== undefined) {
					var textareasStyle = getComputedStyle(textareas[i], null) || textareas[i].currentStyle;
					CKEDITOR.replace(textareas[i], {height:textareasStyle.height, width:'100%', toolbar: ckeditorClasses[textareaClass]});
				}
			}
		}
	}
}

 

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Roffun
#4 26. Oktober 2015, 11:06

Если textarea который вам нужен должен работать с классом form-control, то почему бы не создать дополнительный редактор кроме 

Full, Medium, Basic ?

тогда ваш редактор будет вызываться так:

<textarea class="form-control" rows="3"></textarea>

p.s. Сам буквально позавчера сталкивался с подобной задачей, нужно было в page.add.tpl и page.edit.tpl выводить редактор с другими плагинами и настройками ( реализовал подсчет символов без пробелов и цены за 1000 знаков налету), чтобы потом на странице новости автоматически сделать микроразметку рецептов блюд по стандарту schema.org.

В итоге работает редактор вида:  

<textarea class="receptieditor" rows="3"></textarea>

Создание редактора с новым классом делается в несколько строк, и вызывается в любом месте без проблем.

Добавлено 12 минут спустя:

Кстати подключение ckeditor к любому textarea в примерах и документации указано через name , значит класс может быть свободен.

Например:

                        <script src="http://cdn.ckeditor.com/4.5.2/full/ckeditor.js"></script>
                        <textarea name="myform" class="myclass form-control" cols="100" rows="20"></textarea>
                        <script>
                                var myform=CKEDITOR.replace("myform");
                                AjexFileManager.init({returnTo:"ckeditor",editor:myform});                        
                        </script>

 

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts

Dieser Beitrag wurde von Roffun (am 26. Oktober 2015, 11:28, vor 8 Jahre) bearbeitet
Macik
#5 26. Oktober 2015, 17:02
#41108 Roffun:

Если textarea который вам нужен должен работать с классом form-control, то почему бы не создать дополнительный редактор кроме 

В целом можно и так выйти из положения.
Но в данном случае этот класс (в бутстрапе) подразумевает назначение всем полям типа `textarea` (если мы хотим, чтобы они были в стиле), поэтому конкретно для этого случая скорее не подойдет.

 

Кстати подключение ckeditor к любому textarea в примерах и документации указано через name , значит класс может быть свободен.

Все верно. Просто указание имени менее гибко.

 

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Edward
#6 27. Oktober 2015, 05:08

Macik, Ваш код рабочий, заявку сейчас сделаю.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Macik
#7 27. Oktober 2015, 19:53
#41114 Edward:

Macik, Ваш код рабочий, заявку сейчас сделаю.

Спасибо за раппорт. Исправлено.

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F