TinyMCE es un editor WYSIWYG que convierte un elemento HTML en un editor HTML completamente funcional. Es decir, con esta plugin de jQuery puedes convertir cualquier textarea de tu página, en un editor HTML, y con solo unas cuantas líneas de código.
En anteriores tutoriales ya vimos cómo convertir un textarea en un editor HTML con TinyMCE, pero en este iremos un poco más allá. TinyMCE cuenta con características muy útiles que hacen que el editor sea más potente y más sencillo de utilizar. Junto al texto, las imágenes suelen ser el elemento más útil a insertar en el editor. En este tutorial, te mostraremos cómo agregar un selector de archivos locales para insertar una imagen en el editor TinyMCE.
En el tutorial integraremos la funcionalidad de subir imágenes en el editor TinyMCE. Esto agregará un selector de archivos en el popup Imagen y permitirá al usuario subir la imagen en el editor TinyMCE.
Código HTML
Define un elemento HTML (textarea) para convertirlo en nuestro editor WYSIWYG.
<textarea name="editor" id="editor"></textarea>
Plugin TinyMCE
Lo primero que tienes que hacer es hacerte con la última versión de la librería TinyMCE e incluirla en tu página web.
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
El siguiente código Javascript reemplazará el textarea de antes por el editor. Ojo, tendrás que pasar como parámetro el selector del elemento, en nuestro caso #editor. Aparte de eso, el siguiente código se encargará de:
- Abrir una herramienta Imagen para insertar y editar imágenes en el editor.
- Abrir un popup para seleccionar la imagen.
- Se agregará un selector de archivos locales al popup Imagen para subir la imagen desde el equipo.
<script>
tinymce.init({
selector: '#editor',
plugins: 'image code',
toolbar: 'undo redo | link image | code',
// enable title field in the Image dialog
image_title: true,
// enable automatic uploads of images represented by blob or data URIs
automatic_uploads: true,
// add custom filepicker only to Image dialog
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
</script>