tinymce: algunas notas sin orden

Posted on by ernesto

callback tras iniciar el editor

init_instance_callback: function (editor)
{
     console.log("Tinymce está en marcha.");
}

la función que se le pase a este parámetro debe incluir un argumento como editor que garantice su ejecución posterior a la puesta en marcha de tinymce. sin la resolución del argumento editor, no se ejecutan las órdenes de la función.

creación de un nuevo botón de formato

en primer lugar, en la configuración que se le pasa a tinymce con tinymce.init(), hay que declarar el nuevo formato:

formats:
{
     cite: { inline: "cite" }
}

después, en el apartado setup de la misma configuración, se crea el botón en cuestión:

setup: function (editor)
{
     editor.addButton
     (
          "cita",
          {
               icon: "book",
               text: false,
               title: "Cita (sólo títulos)",
               onclick: function()
               {
                    editor.execCommand("mceToggleFormat", false, "cite");
               }
          }
     );
}

el comando mceToggleFormat, clave deste asunto, se encarga de aplicar el formato cite al texto seleccionado al igual que hace con una negrita o cursiva cuando se le solicita.

hay más información sobre el resto de las opciones en Creating a custom toolbar button.

acceso al editor o editores de tinymce

for(var i = 0; i < tinymce.editors.length; i++)
{
     console.log("Id del editor: " + tinymce.editors[i].id);
}

mediante estotra función, se obtienen los identificadores de los editores que haya en marcha:

Id del editor: mce_0

inserción de contenido en un editor

function a(m)
{
     tinymce.get("mce_0").insertContent(m);
}
var m = "que no fuese recuerdo de la muerte";
a(m);

esta función introduce en el editor mce_0 el texto de la variable m justo allí donde se encuentre el cursor.

campos de un formulario en la barra de herramientas de tinymce

function a(m)
{
     var o, b, e;
     // "mceu_18-body" y "mceu_21" son
     // identificadores de capas de la toolbar
     o = document.getElementById("mceu_18-body");
     b = document.getElementById("mceu_21");
     e = document.createElement("div");
     e.setAttribute("class", "mce-container mce-flow-layout-item mce-btn-group");
     o.insertBefore(e, b);
     e.innerHTML = m;
     e.childNodes;
}

en este caso, el argumento m contiene una cadena con código HTML5:

<input id="buscador" type="text"/>
<select id="titulos">
     <option disabled="disabled" selected="selected">tí­tulos</option>
     <optgroup id="audio" label="audio">
          <option value="a1" title="audio 1">audio 1</option>
          <option value="a2" title="audio 2">audio 2</option>
     </optgroup>
     <optgroup id="video" label="video">
          <option value="v1" title="video 1">video 1</option>
          <option value="v2" title="video 2">video 2</option>
     </optgroup>
</select>

e.childNodes convierte los elementos HTML de la cadena en los nodos correspondientes del DOM.

Tagged , , , ,