javascript: obtiene html del editor froala v3 fuera de la inicialización

CorePress2023-11-30  1

Tengo una página que crea dinámicamente múltiples editores Froala v3.1. Cada uno tiene este aspecto:

<div class="pBlock">
  <!-- other DIVs -->
  <div class="centerBlock">this is the editor</div>
</div>

Estoy intentando obtener el contenido html de cada uno en un bucle.

$(".pBlock").each(function(){
   var target=$(this).find(".centerBlock");
   var html=$(target).froalaEditor.html.get();
});

Pero lo entiendo

Error de tipo no detectado: no se puede leer la propiedad 'html' de undefinido

Los únicos ejemplos que puedo encontrar son aquellos en los que se obtiene el contenido html durante la inicialización del editor, como este:

<script>
  let editor = new FroalaEditor('div#froala-editor', {}, function () {
    console.log(editor.html.get())
  });
</script>

¿Pero eso no crea otra instancia? ¿Cómo puedo sacar el html del editor, incluso cuando está fuera del alcance de init?

Estoy inicializando el editor de esta manera:

// init a froala instance
function initFroala( selector , fWidth, htmlSet ){

        var tkn=getToken();
        new FroalaEditor(selector,{     
              key: froalaKey,
            attribution: false,
            width: fWidth,
            heightMin :200,
            heightMax : 1000,
            imageUploadURL: "cgi/editorUpload.exe",
            imageAllowedTypes: ["jpg","png","jpeg"],
            imageMaxSize: 2 * 1024 * 1024,
            imageUploadParams: {"token": tkn},
            events: {
                "image.error": function(error,response){
                    if( error.code === 2 ||  error.code===4 ) {
                        var json=JSON.parse(response);                      
                        console.log("%c"+json,"color:orange;");+
                      console.log("%c"+response,"color:orange;");+
                        console.log("%c"+error,"color:orange;");+
                        alertify.error( json.error );
                    }else{
                        console.log( error );
                        console.log( response );                        
                        alertify.error( error.message );
                    }

                }   
            }   
        },function(){
            this.html.set(htmlSet);
        }); 
}       
  • ¿Cómo estás inicializando estos editores? - charlietfl 6 de junio de 2020 a las 21:21
  • Lo agregué al final de mi operación, gracias -Shawn 6 de junio de 2020 a las 21:23
  • Así que regresa el nuevo FroalaEditor de tu diversión.cción y almacenamiento que ayudarían. Entonces debería poder utilizar esa instancia almacenada para obtener el html actual para esa instancia. ¿Estás recorriendo el dom y llamando a esa función para cada instancia de elemento en dom? - charlietfl 6 de junio de 2020 a las 21:25
  • Sí, estoy llamando a la misma función initFroala para cada instancia -Shawn 6 de junio de 2020 a las 21:27
  • Entonces, ¿debería almacenar la instancia en lugar de orientarla por ID o algo así? -Shawn 6 de junio de 2020 a las 21:28


------------------------

También encontré el mismo problema. "froala_editor.min.js" no se pudo cargar completamente cuando se creó y llamó esta instancia.

Utilice el siguiente código que utiliza la función jQuery getScript():

var editor=$.getScript("/"+contextName+"/froala_editor_3.1.1/js/froala_editor.min.js", function () { $( 'div#textEditor').froalaEditor('html.get').text(); });

Recuerde cambiar la ruta relativa del directorio al js requerido.



------------------------

la solución (gracias a charlietfl) fue agregar el objeto elemento a la propiedad de datos del elemento html html

// init a froala instance
function initFroala( selector , fWidth, htmlSet  ){
        
        var tkn=getToken();
        let editor=new FroalaEditor(selector,{      
              key: froalaKey,
            attribution: false,
            width: fWidth,
            heightMin :200,
            heightMax : 1000,
            imageUploadURL: "cgi/editorUpload.exe",
            imageAllowedTypes: ["jpg","png","jpeg"],
            imageMaxSize: 2 * 1024 * 1024,
            imageUploadParams: {"token": tkn},
            events: {
                "image.error": function(error,response){
                    if( error.code === 2 ||  error.code===4 ) {
                        var json=JSON.parse(response);                      
                        console.log("%c"+json,"color:orange;");+
                      console.log("%c"+response,"color:orange;");+
                        console.log("%c"+error,"color:orange;");+
                        alertify.error( json.error );
                    }else{
                        console.log( error );
                        console.log( response );                        
                        alertify.error( error.message );
                    }

                }   
            }   
        },function(){
            this.html.set(htmlSet);             
            $(selector).data("editor",editor);      
        }); 
}       

luego, para obtener el html, recuperé el editor de datos

// get content  
var blockContent="";
var content="";
var editor="";

$(".pBlock").each(function(){        
        editor=$(this).find(".centerBlock").data("editor");                             
        blockContent=editor.html.get();             
        content+="&centerData="+encodeURIComponent(blockContent);
});
Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare