Cómo cargar wp_editor () a través de AJAX / jQuery

Pregunta:

Tengo un tema desarrollado a medida y realmente complejo. Una de las cosas que tengo son múltiples áreas de contenido donde los usuarios pueden especificar contenido para pestañas específicas. Carga varias instancias del editor de WordPress a través de la función wp_editor() . Funciona perfectamente. (Todo esto está en el lado del administrador, en el tipo de publicación "Página")

Sin embargo, comencé a hacer algunas mejoras, incluida la capacidad de agregar / eliminar pestañas dinámicamente (antes, cargaba 6 editores en la página). Los usuarios pueden tener de 1 a 7 pestañas.

Cuando los usuarios agregan una pestaña, es necesario agregar una instancia del editor a la página. Sin embargo, no importa lo que intente, no puedo hacer que se cargue y se muestre correctamente.

Aquí están las 2 cosas que he probado hasta ahora:

  1. Cree un archivo php que tenga incluido el bootstrap de administración y luego cargue el editor con wp_editor() . Luego hago un jQuery $.load para llamar a la página e incluir el HTML resultante en el área que necesita mostrar. Sin embargo, esto realmente no funciona, ya que los botones de formato de los editores desaparecen (vale la pena señalar que, al abrir la página directamente, el editor se muestra y funciona perfectamente)
  2. Cargó el editor en la página, dentro de un div oculto, y luego, una vez que se agrega una pestaña, use jquery para moverla a su lugar. Esto carga el editor intacto, pero no puede usar ninguno de los botones del editor (se muestran, pero no hacen nada), y no puede colocar el cursor en el área de texto (curioso, sin embargo, que cambiar al modo HTML permite escribir e interactuar con los botones del modo HTML)

Entonces, la pregunta es, ¿alguien ha tenido suerte agregando editores a través de llamadas AJAX? ¿Algún consejo?

Respuesta:

Para que aparezcan las etiquetas rápidas, debe volver a crear una instancia de ellas dentro de su controlador ajax oncomplete.

quicktags({id : 'editorcontentid'});

Mi controlador de éxito de ajax se ve así;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

Me las arreglé para cargar el editor llamando primero a una función estática que crea el editor y lo almacena en caché como variable. Ejecuto el método de creación del editor en init. Esto parece conseguir que wordpress solicite todos los scripts necesarios.

Es importante que cuando cree su instancia de editor, la configure para usar tinymce, de esa manera el archivo tinymce js también se solicita.

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım