0
258
ViewsUso del editor TinyMCE para mantener la imagen como base 64 antes del envío del formulario
Estoy creando una aplicación Javascript que recopila el contenido de un editor TinyMCE y lo envía todo al servidor en una sola publicación. Estoy tratando de permitir que el usuario cargue imágenes en el editor, pero no sé cómo hacerlo sin enviar las imágenes en el momento en que se cargan en un controlador de imágenes del lado del servidor. Necesito una forma de enviar todas las imágenes y el texto en una sola publicación.
No sé mucho sobre el manejo de imágenes, pero creo que puedo lograr esto recopilando las imágenes como cadenas base64 y enviándolas junto con el resto de la entrada html. Primera pregunta: ¿Es correcta mi línea de pensamiento?
Segunda pregunta: ¿Cómo logro esto? Me las arreglé para codificar una imagen cargada como base 64, pero el cuadro de diálogo de carga de imagen del editor TinyMCE se atasca como si todavía se estuviera cargando incluso después de que ya tengo la cadena base 64.
índice.html:
tinymce.init({ selector: '.texteditor', plugins: 'autoresize code hr image link lists media searchreplace table charmap anchor help', images_upload_url: 'scripts/image_upload.js', images_upload_handler: function () { console.log("heres the image_upload_handler"); //This never fires upload_image(); }, automatic_uploads: true, });image_upload.js:
function upload_image(event) { const dropzone = document.getElementsByClassName('tox-dropzone')[0]; var fileInput = dropzone.getElementsByTagName('input')[0]; var files = fileInput.files; var file = files[0]; console.log("File " + file.name + " is " + file.size + " bytes in size"); getBase64(file); } function getBase64(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { console.log(reader.result); //This successfully prints the base 64 string, but the editor's dialog box won't close and the image never appears in the editor }; reader.onerror = function (error) { console.log('Error: ', error); }; } Cuando subo una imagen usando el editor, el resultado es este: 
La consola muestra la imagen codificada como base 64, pero el cuadro de diálogo no se cierra. ¿Qué necesito hacer diferente? Vainilla Javascript, por favor.
1 answers
Answer question0
No comprende el propósito de images_upload_url : ese parámetro debe apuntar a un punto final del lado del servidor que procesa la imagen Base64 y devuelve una nueva URL que se usa en el atributo src de la etiqueta <img> para la imagen.
https://www.tiny.cloud/docs/general-configuration-guide/upload-images/
Tampoco debe usar images_upload_url e images_upload_handler : son dos formas diferentes para que TinyMCE publique la imagen para procesarla en un servidor. Como ha visto, si define images_upload_url , TinyMCE no intentará usar images_upload_handler . Realmente solo necesita images_upload_handler si nuestro images_upload_url no está haciendo lo que necesita.
La página de documentación a la que hice referencia anteriormente debería tener el código predeterminado que ejecutamos cuando usamos images_upload_url .
Me gustaría señalar que pregunta si puede enviar las imágenes de Base64 con el contenido cuando envía los datos. Puede hacerlo absolutamente, pero la carga HTML será significativamente mayor ya que el contenido binario de la imagen ahora es parte del propio HTML en lugar de almacenarse externamente como una imagen en un servidor (por ejemplo, un archivo PNG).
Las imágenes Base64 también impiden que el navegador represente cualquier otro HTML en la página mientras procesan los datos Base64; esto generalmente se considera malo para los tiempos de carga de la página.