Вызов CKEditor по классу

Мне нужно автоматически вызывать несколько экземпляров CKEditor ... на самом деле я использую функцию:

CKEDITOR.replace( 'editor1');

Где "editor1" - это id-имя div, в котором я хочу показать мой CKEditor.

Я использую jQuery для автоматизации этого процесса, и мне нужно использовать тег «class» вместо идентификатора.

В частности, у меня есть этот html:

<div class="CKEditor">
    <div class="text">
            mytext
    </div>

    <p style="text-align:center" class="buttons">
        <input type="button" value="edit" class="button_edit">
        <input type="button" value="preview" class="button_preview" style="display:none">
    </p>

    <div class="editor" >
    </div>

</div>

и этот скрипт jQuery:

$(function() 
{
    $('.CKEditor').each(function()
    {
        var __main = $(this);
        var __buttons = __main.children('.buttons');
        var __text = __main.children(".text");
        var editor;

        __buttons.children('.button_edit').click(function()
        { 
            __text.hide();
            if (editor) return;

            editor = CKEDITOR.replace("editor");
            editor.setData(__text.html());

            if(editor)
            { 
                __buttons.children('.button_edit').hide(); 
                __buttons.children('.button_preview').show(); 
            }
        });

        __buttons.children('.button_preview').click(function()
        {
            __text.show();
            __text.html(editor.getData());

            if ( !editor ) return;

            editor.destroy();
            editor = null;
            __buttons.children('.button_edit').show(); 
            __buttons.children('.button_preview').hide(); 
            __main.children("#editor").html("");
        });
    });
});

Возможно ли это без изменения исходного кода CKEDITOR?

ИЗМЕНИТЬ

Я нашел решение:

1) HTML станет:

<div class="editor" id="edt1"></div>

2) В JQuery:

var __editorName = __main.children('.editor').attr('id');

и я вызываю CKEditor с помощью:

editor = CKEDITOR.replace(__editorName);

=) =)


javascript jquery ckeditor
person Danilo    schedule 24.12.2012    source источник

Ответы (8)


arrow_upward
8
arrow_downward

В CKEditor уже встроен заменитель классов. Для любого текстового поля с примененным классом ckeditor редактор будет применен автоматически без инициализации.

Код находится в ckeditor.js и использует CKEDITOR.replaceClass="ckeditor";

Инициализация по классу (дополнительный JavaScript не требуется)

Добавить класс ckeditor в текстовое поле

HTML

<textarea class="ckeditor" rows="4" cols="50"></textarea>

.NET

<asp:TextBox ID="txt" CssClass="ckeditor" runat="server" TextMode="MultiLine" />

Инициализация специального класса

Если вы хотите использовать свой собственный класс, вы можете просто перезаписать класс своей собственной инициализацией после ckeditor.js

Использовать:

CKEDITOR.replaceClass="MyClass";
person DreamTeK    schedule 14.02.2018

arrow_upward
7
arrow_downward

Используя replaceAll.

заменить текстовое поле с помощью класса

на странице:

<textarea class="myClassName"></textarea>

в коде JS

CKEDITOR.replaceAll( 'myClassName' );
person Nurul    schedule 29.01.2020

arrow_upward
3
arrow_downward

Теперь это возможно, проверьте это: http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html

person patie    schedule 02.07.2013

arrow_upward
2
arrow_downward

Лично я использую такую ​​функцию:

function loadEditor(id){
    var instance = CKEDITOR.instances[id];
    if(instance){
        CKEDITOR.destroy(instance);
    }
    var editor = CKEDITOR.replace(id);
}

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

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

person Moseleyi    schedule 24.12.2012

arrow_upward
0
arrow_downward

Вот минималистичный пример, иллюстрирующий использование класса ckeditor в текстовых областях на основе урезанной версии http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html:

<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>

<textarea id="something" class="ckeditor">
    &lt;p&gt; Hello world! &lt;/p&gt;
</textarea>

В ходе тестирования я обнаружил, что тег <textarea> должен иметь класс ckeditor, а также поле id или name.

person mwfearnley    schedule 22.10.2016

arrow_upward
0
arrow_downward

... что немного странно, потому что образец Заменить классом содержит следующий код:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">

И работает отлично.

person Aaska Patel    schedule 01.02.2018

arrow_upward
0
arrow_downward

Лучший способ создать несколько экземпляров ckeditor4 - использовать адаптер ckeditor-jquery.

Только тогда

$( 'textarea.ckeditor' ).ckeditor();

достаточно иметь несколько экземпляров ckeditor.

person Anastasios Barous    schedule 04.09.2018

arrow_upward

arrow_downward

person    schedule
comment
опубликованный фрагмент не работает. Этот ответ требует обновления - person Heemanshu Bhalla; 18.01.2020