8

Im using "redactor" (http://imperavi.com/redactor) as my HTML editor. When there are multiple editor in one page, this is working perfectly if I initialize using each editor using its ID. But when I initialize using its class, the first one only working perfectly.

Im using following code to initialize this

$(".htmlEditor").redactor();

the first editor works. If i press the format button of 2nd or other editor, focus jumps to the first editor.

if i initialize each editor separately using its ID, then all the editors are working.

but i wanted use class, since the editors are added to the page dynamically.

i have used other jquery plug-ins ( multiple instance in one page using class to initialize ), there should be a way to do this in this plugin.

am i missing any ? or do i have to do any config ?

user2609021
  • 681
  • 2
  • 11
  • 30
  • Did anyone find a solution yet? Can't be possitble that you can not have more then 1 editor per page .... – nclsvh Jul 01 '16 at 12:13

3 Answers3

5

You have to initialize each editor separately. When you use $(".htmlEditor").redactor();, you are selecting all editors that are already initialized editors inside the DOM tree and that's causing multiple initialization problems. You're saying you want to add editors dynamically, so you have to initialize each new editor separately, even without an ID. To do that, you'll have to get the latest dynamically added editor DOM object and use jquery to initialize it. I've wrote a simple example that has a button that adds a new editor and initializes it each time it gets a click:

HTML

<div id="editors"></div>

<button id="add-editor">Add New Editor</button>

Javascript

$('#add-editor').on('click', function() {
    var new_editor_text = "<h2>Hello and welcome</h2>" +
        "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>";

    var $editor = $('<textarea/>', { 'class': 'redactor-editor', text: new_editor_text });

    $('#editors').append($editor);
    $editor.redactor();
});

Here is my working example you can test and see it's working: http://zikro.gr/dbg/html/redactor/

And here is a screen capture of it showing how it's working:

Screen Capture

Christos Lytras
  • 36,310
  • 4
  • 80
  • 113
  • 1
    @arpit-shah please try this and let me know if it's working for you. There is also a way to initialize it by class, even if you are directly inserting HTML `textarea` inside the body of the page. – Christos Lytras Mar 04 '17 at 11:14
1

Try to use smth like this:

$(".htmlEditor").each(function() {
    $(this).redactor();
});
Andrei Hryhoryeu
  • 33
  • 5
0

Try this

for redactor in $(document).find("textarea.editor")

      $(redactor).redactor()
Евгений Антипин
  • 1