How to create dynamic instances of JQueryTE text editor

Question

I am attempting to create a small program that incorporates dynamically created instances of this editor.

I have it working except for the ability to create a button that opens/closes the editor. jsFiddle of what I've got so far.

"use strict";
$(document).ready(function() {

var createPad = $("#createPad").click(function () {
var body = document.getElementById("body");

var editorNumberCounter = 1;
var toggleOnOffCounter= 1;
var editorName = '.'+ (editorNumberCounter++);


var status = document.createElement('div');
status.className = "status";
status.id = "status";

var editorName= document.createElement('span');
editorName.className = "status";
editorName.id = "status";

$(body.appendChild(status));
$(body.appendChild(editorName));

var toggle = status.id + toggleOnOffCounter++;

    $(editorName).jqte();

    // settings of status
    var jqteStatus = true;
    $(toggle).click(function()
    {
        jqteStatus = jqteStatus ? false : true;
        $(editorName).jqte({toggle : jqteStatus})
    });

     });

    });

Irvin Dominin · Accepted Answer · 2013-06-10T21:40:59.027

I made up some changes to your code an now seems to work.

I try to explain them point by point:

variabiles editorNumberCounter and toggleOnOffCounter must be globally scoped or you lose the incremented value
ID of elements (dynamically created or not) MUST be unique, so I create the div and span element considering the counter
for dynamically created elements you must use the bind method or the event will not be bind
the toggle property not exist! You must use the status property
the element onto JQTE is binded is get as next element after the clicked element

Code:

var editorNumberCounter = 0;
var toggleOnOffCounter = 0;
$(document).ready(function () {

    var createPad = $("#createPad").click(function () {
        var body = document.getElementById("body");

        var editorName = '.' + editorNumberCounter++;
        toggleOnOffCounter++;


        var status = document.createElement('div');
        status.className = "status";
        status.id = "div_status" + editorNumberCounter;

        var editorName = document.createElement('span');
        editorName.className = "status";
        editorName.id = "span_status" + editorNumberCounter;

        $(body.appendChild(status));
        $(body.appendChild(editorName));

        $(editorName).jqte();

        // settings of status
        var jqteStatus = true;
        $("#div_status" + editorNumberCounter).bind("click",function () {
            jqteStatus = jqteStatus ? false : true;
            $(this).next().jqte({
                status: jqteStatus
            })
        });

    });

});

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/UfhNQ/14/

Thanks for this, and thank you for the excellent summary as to why it didn't work! — William, Jun 10 '13 at 20:28
Actually your code is technically correct but when you use the span element with JQueryTE the result is supposed to be one where when you close the editor it retains the state of the edits. My/your version simple closes the editor and it breaks the functionality of the plug in. I mean what you did was technically correct but something is not right. — William, Jun 10 '13 at 20:38
This link http://helpknow.com/jqte/demo/demo.html is a link to the JQTE demo.See how the third example retains the state of the edits you make in the editor? In short if you use the editor to make your text bold or italicized or whatever it retains that after you close the editor. I was trying to achieve that result for each dynamically created editor. — William, Jun 10 '13 at 22:02
Is a knows issue of the control, must be fixed in 1.4.0 but not, maybe will be fixed in the next release http://jqueryte.com/comments (comment from Julien); I found another little issue, I asked the developer... — Irvin Dominin, Jun 11 '13 at 16:34

How to create dynamic instances of JQueryTE text editor

1 Answers1