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

Edward
#1 2015-10-26 03:49

Members
Thanked: 29 times

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*
 * 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
This post was edited by Macik (2015-10-31 16:40, 9 years ago)
esclkm
#2 2015-10-26 09:04

Team
Thanked: 76 times

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

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

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

Team
Thanked: 181 times

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

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

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

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

ckeditor.default.set.js
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 2015-10-26 11:06

Contributors
Thanked: 175 times

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

Full, Medium, Basic ?

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

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

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

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

XML/XHTML
1
<textarea class="receptieditor" rows="3"></textarea>

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

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

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

Например:

XML/XHTML
1
2
3
4
5
6
<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
This post was edited by Roffun (2015-10-26 11:28, 9 years ago)
Macik
#5 2015-10-26 17:02

Team
Thanked: 181 times

#41108 Roffun:

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

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

 

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

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

 

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

Members
Thanked: 29 times

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

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
Macik
#7 2015-10-27 19:53

Team
Thanked: 181 times

#41114 Edward:

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

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

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