2012-08-10 39 views
7

TinyMCE es una gran herramienta y nos ha solucionado muchos problemas. Sin embargo, hay un problema que ha sido difícil de resolver. Aunque TinyMCE cambiará el tamaño de la fuente de los elementos en una lista, no cambia el tamaño de las viñetas (lista desordenada) o los números (lista ordenada) que proceden esos elementos.¿Cómo establecer el tamaño de fuente de las viñetas y números de elementos de lista en tinyMCE?

Lo que el usuario termina con algo que se parece a esto:

Item fonts change but bullet fonts do not change

Como se puede ver en la imagen, el tamaño de las fuentes en las dos listas son diferentes, pero el tamaño de la las balas son lo mismo.

¿Alguien sabe cómo obtener TinyMCE para cambiar las viñetas para que coincida con la fuente?

Respuesta

0

Dado que TinyMCE envuelve todo en span. Para evitar los problemas como si han tenido yo he hecho esto:

<ol> 
    <li style="font-size: <something you want>;">one</li> 
    <li style="font-size: <something you want>;">two</li> 
</ol> 
+0

Sí. Creo que lo que estoy buscando es dónde y cómo hacerlo. – lambmj

+0

Sin embargo, si está creando algo para el cual el usuario final no tendría acceso a la parte HTML del mismo, entonces no puede lograr este método. – Dez

5

Después de buscar en los foros TinyMCE here y here me ocurrió con esta solución.

tinyMCE.onAddEditor.add(function(manager, editor) { 
    // TinyMCE doesn't change the font of the li portions of the list,          
    // we have do that ourselves here. See http://www.tinymce.com/forum/viewtopic.php?id=26100    
    editor.onExecCommand.add(function(editor, cmd, ui, val) {            
     if (cmd === "FontSize") { 
      var node = editor.selection.getNode();               
      if (node) {                      
       var children = $(node).children("li"); 
       if (children) { 
        // TinyMCE keeps an attribute that we want it to recompute,        
        // clear it. See http://www.tinymce.com/forum/viewtopic.php?id=25676      
        children.removeAttr('data-mce-style');             
        children.css("font-size", val);               
       } 
      }  
     }    
    });      
}); 
+0

Existen algunos problemas con este enfoque: * TIENE * que tener más de 1 elemento en la lista numerada y con viñetas para que funcione el cambio de tamaño. Y debe hacerlo * después * de que cree las listas (no se puede hacer antes de que se cree la lista). Dicho eso ... Este enfoque funciona para lo que el asker necesitaba que hiciera. – Dez

1

Esto funciona para mí:

en tinyMCE.init He añadido una devolución de llamada de la configuración:

setup: function(ed) { 
     ed.onKeyDown.add(function(ed, e) { 
     tinyMceKeyDownCallbacks(ed,tiny_id); 
     }); 
    } 

entonces las funciones de jQuery que se actualizan cada li tener un lapso con su ciclo clase y/o estilo:

function tinyMceKeyDownCallbacks(inst,tiny_id){ 
    var spans = $(inst.getBody()).find("li span"); 
    console.log("S: "+spans.length); 
    spans.each(function(){ 
    var span = $(this); 
    span.parents('li').addClass(span.attr('class')); 
    span.parentsUntil('li').attr('style',span.attr('style')); 
    }); 
} 
+1

es posible que desee restablecer la clase primero: span.parents ('li'). RemoveAttr ('clase') – adedip

1

He trabajado en los problemas y he agregado algunas características interesantes. Esto funciona para mí ahora: solución

ed.onExecCommand.add(function(editor, cmd, ui, val) { 
    if (cmd === "FontSize" || cmd === "FontName" || cmd === "ForeColor" || cmd === "Bold" || cmd === "Italic") { 
    var node = editor.selection.getNode(); 
    if (node) { 
     var children = $(node).closest("li"); 
     if(children.length == 0) 
      var children = $(node).find("li"); 

     if (children) { 
      children.removeAttr('data-mce-style'); 
      if(cmd === "FontSize") 
       children.css("font-size", val); 
      if(cmd === "FontName") 
       children.css("font-family", val); 
      if(cmd === "ForeColor") 
       children.css("color", val); 
      if(cmd === "Bold") { 
       if(children.find("strong").length > 0) { 
       children.removeAttr('data-mce-style'); 
       children.css("font-weight", "bold"); 
       } else { 
       children.removeAttr('data-mce-style'); 
       children.css("font-weight", "normal"); 
       } 
      } 
      if(cmd === "Italic") { 
       if(children.find("em").length > 0) { 
       children.removeAttr('data-mce-style'); 
       children.css("font-style", "italic"); 
       } else { 
       children.removeAttr('data-mce-style'); 
       children.css("font-style", "normal"); 
       } 
      } 
     } 
    } 
    } 
    if (cmd === "InsertOrderedList" || cmd === "InsertUnorderedList") { 
    var node = editor.selection.getNode(); 
    if (node) { 
     $(node).find("li").each(function() { 
      var children = $(this).find("span:first"); 
      if (children.length > 0) { 
       $(this).removeAttr('data-mce-style'); 

       if(children.css("font-size") != "undefined") 
        $(this).css("font-size", children.css("font-size")); 
       if(children.css("font-family") != "undefined") 
        $(this).css("font-family", children.css("font-family")); 
       if(children.css("color") != "undefined") 
        $(this).css("color", children.css("color")); 
       if($(this).find("em").length > 0) 
        $(this).css("font-style", "italic"); 
       if($(this).find("strong").length > 0) 
        $(this).css("font-weight", "bold"); 
      } 
     }); 
    } 
    } 
}); 
2

de Bernhard no funcionó para mí en TinyMCE 4.1.7, pero el código de abajo hace. Incluí un poco de contexto para poder hacerlo lo más claro posible.

Esto es de un creador de sitios web. El usuario abre un editor haciendo clic con el botón derecho en el DIV que desea editar y seleccionando "texto" en el menú contextual. Esto ejecuta un tinymce.init que conecta un panel de edición en línea al DIV. El control viene aquí cuando el editor ha sido agregado.

El primer editor.on establece una devolución de llamada para capturar el final de la creación del editor y en ese momento dispara el foco para mostrar el editor. El segundo editor.on capta un cambio en un lapso dentro de un li y realiza la actualización a la li. El tercero editor.on capta el cierre del editor.

/************************************************************************************/ 
/*        TinyMCE Events          */ 
/************************************************************************************/ 

tinymce.on('AddEditor', function(e) { 
      // Once editor has been added show it by firing 'focusin' instead of waiting for a click 
       e.editor.on('NodeChange',function(e) { 
        e.target.fire('focusin');   // show the editor 
       }); 

      // Update parent <li> to match a font-size or font-family change in text 
       e.editor.on('ExecCommand',function(e) { 
        var cmd = e.command; 
        if (cmd === "FontSize" || cmd === "FontName") { 
         var val = e.value; 
         var node = e.target.selection.getNode(); // editor in this event object is at target 
         var nodeParent = node.parentNode; 
         if (node.nodeName === "SPAN" && nodeParent.nodeName === "LI") { 
          // We're changing the style of a <span> that's inside an <li>. 
          // Change the <li> to match the new font-size or font-family. 
          // (B, U, and forecolor buttons don't come here so we can't update li here for those) 
          nodeParent$ = $(nodeParent); 
          nodeParent$.removeAttr('data-mce-style'); 
          if(cmd === "FontSize") { 
           nodeParent$.css('font-size',val); 
          } 
          if(cmd === "FontName") { 
           nodeParent$.css('font-family',val); 
          } 
         } 
        } 
      }); 

      // When editor is removed (by clicking in a blank area of the inline panel)  
      // restore draggability to the DIV (had to kill before tinymce.init because draggability 
      // and contenteditable don't work together).  
       e.editor.on('RemoveEditor',function(e) { 
        g.currentElement$.attr('editor_state', "off") 
            .draggable('enable') // make DIV draggable again 
            .removeClass('textCursor'); // give DIV back its pointer cursor 
       }); 
}); 
2

He editado ligeramente la respuesta de Steve para usar tinymce domutils en lugar de jquery. También agregué el cheque para toda la lista de selección:

ed.on('ExecCommand', function checkListNodes(evt) { 
    let cmd = evt.command; 
    if (cmd === 'FontSize' || cmd === 'FontName') { 
     let val = evt.value; 
     let node = evt.target.selection.getNode(); 
     let nodeParent = node.parentNode; 
     if (node.nodeName === 'SPAN' && nodeParent.nodeName === 'LI') { 
      if (cmd === 'FontSize') { 
       ed.dom.setStyle(nodeParent, 'font-size', val); 
      } 
      if (cmd === 'FontName') { 
      ed.dom.setStyle(nodeParent, 'font-family', val); 
      } 
     } else if (node.nodeName === 'UL' || node.nodeName === 'OL') { 
      let li = ed.dom.select('li', node); 
      if (cmd === 'FontSize') { 
       ed.dom.setStyle(li, 'font-size', val); 
      } 
      if (cmd === 'FontName') { 
       ed.dom.setStyle(li, 'font-family', val); 
      } 
     } 
    } 
}); 

Tenga en cuenta que esto, lamentablemente, no funcionará para el cambio de color.Más información está aquí Can't catch the ForeColor command anymore, tinymce 4.1.4

+0

Usando esto con tinymce v4.7.1 y está funcionando muy bien. – jxmallett

0

He ajustado la respuesta de Steve para ser utilizado en imprenta,

editor.on('ExecCommand', function(lob) { 
    contentBlockElement.text = editor.getContent({ format: 'raw' }); 
    var cmd = lob.command; 
    if (cmd === "FontSize" || cmd === "FontName") { 
     var val = lob.value; 
     var node = lob.target.selection.getNode(); 
     var nodeChild = node.childNodes; 
     if (node.nodeName === "UL" && nodeChild[0].nodeName === "LI") { 
      this.nodeChild$ = $(nodeChild); 
      this.nodeChild$.removeAttr('data-mce-style'); 
       if (cmd === "FontSize") { 
        this.nodeChild$.css('font-size', val); 
        } 
       if (cmd === "FontName") { 
        this.nodeChild$.css('font-family', val); 
      } 
     } 
    } 
}); 
0
tinymce.on('AddEditor', function(ea) { 
        ea.editor.on('ExecCommand',function(e) {     
         var cmd = e.command; 
         var val = e.value; 
         var node = e.target.selection.getNode(); 
         var nodeParent = node.parentNode;      
         nodeParent$ = $(nodeParent); 
         node$=$(node); 
         if (cmd === "FontSize" || cmd === "FontName") {       
           while(nodeParent.nodeName !='LI' && nodeParent.nodeName!='BODY'){ 
           nodeParent = nodeParent.parentNode; 
          } 
          nodeParent$ = $(nodeParent);         
           if(node.nodeName==='OL' || node.nodeName==='UL'){        
            if(cmd === "FontSize") { 
             $(node.children).each(function(){ 
             $(this).css('font-size',val); 
            }); 

            } 
            if(cmd === "FontName") { 
             $(node.children).each(function(){ 
             $(this).css('font-family',val); 
            }); 

            } 
           } 

          if (nodeParent.nodeName === "LI") { 
           nodeParent$.removeAttr('data-mce-style');         
           if(cmd === "FontSize") { 
            nodeParent$.css('font-size',val); 
           } 
           if(cmd === "FontName") {         
           nodeParent$.css('font-family',val); 
           }        
         } 

        } 
         if(cmd==='mceToggleFormat' && e.value==='bold'){ 

          while(nodeParent.nodeName !='LI' && nodeParent.nodeName!='BODY'){ 
           nodeParent = nodeParent.parentNode; 
          } 
          nodeParent$ = $(nodeParent); 
          var strg=$(node).find('STRONG'); 
          if(node.childNodes[0].nodeName==='LI' && $(node).find('STRONG').length >1) 
          { 
           $(node.children).each(function(){ 
             $(this).css("font-weight", "bold"); 
            }); 
          } 
          else if(node.childNodes[0].nodeName==='LI' && $(node).find('STRONG').length ==0){         
            $(node.children).each(function(){ 
             $(this).css("font-weight", "normal"); 
            }); 
          } 
          else if($(nodeParent).find('STRONG').length ==1)        
          { 
            if(nodeParent.nodeName==='LI'){ 
            nodeParent$.css("font-weight", "bold"); 
            } 
          } 
          else if($(nodeParent).find('STRONG').length ==0) 
          { 
           nodeParent$.css("font-weight", "normal"); 

          } 

         } 

       });  

       }); 
+0

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre cómo y/o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta. –

Cuestiones relacionadas