Instalar el editor TinyMCE con Laravel 5.x

Introducción

El objetivo es instalar el editor de texto enriquecido para Javascript en un proyecto de Laravel de la manera mas automatizada posible, facilitando futuras actualizaciones pero sin depender de posibles componentes que no fueran oficiales o poco actualizados.

Preliminares

En resources/views/layouts/app.blade.php remover el atributo defer en la inclusión del archivo app.js ya que éste dificulta el uso de JQuery.

<script src="{{ asset('js/app.js') }}"></script>

Para facilitar la inclusión de archivos de Javascript y de CSS agregar estratégicamente las siguientes etiquetas a este archivo app.js.

@stack('scripts')

@stack('styles')

Para evitar el siguiente mensaje de error se agregó la opción sourceMaps() para habilitar esta opción.

Source map error: request failed with status 404
Resource URL: http://domain.test/js/app.js
Source Map URL: bootstrap.js.map

Esto se realiza en el archivo webpack.mix.js en la raíz del proyecto.

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps()
    .sass('resources/sass/app.scss', 'public/css');

Procedimiento

Instalar el componente de TinyMCE.  Sus archivos son almacenados bajo vendor/tinymce/tinymce.
$ composer require tinymce/tinymce
Configurar el Webpack para que publique los archivos necesarios para utilizar TinyMCE.  Para hacer esto, agregar las siguientes líneas al archivo webpack.mix.js en la raíz del proyecto.
mix.copy('vendor/tinymce/tinymce/tinymce.min.js', 'public/js/tinymce');
mix.copy('vendor/tinymce/tinymce/themes', 'public/js/tinymce/themes');
mix.copy('vendor/tinymce/tinymce/skins', 'public/js/tinymce/skins');
mix.copy('vendor/tinymce/tinymce/plugins', 'public/js/tinymce/plugins');

Como paso final de la instalación, se ejecuta el siguiente comando para ejecutar el Webpack, ya sea en modo de desarrollo.

$ npm run dev

O en modo de producción.

$ npm run prod

Uso

Desde las vistas en las que se desee tener a TinyMCE como editor de texto en sus textarea, agregar el siguiente segmento de código, siendo contents el id del elemento textarea el cual será reemplazado con el editor enriquecido.

@push('scripts')

<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>

<script>
$(document).ready(function() {
    tinymce.init({
        selector: '#contents'
    });
});
</script>

@endpush

A continuación se muestran mas opciones que pueden ser ajustadas para configurar la instancia de TinyMCE.

@push('scripts')

<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>

<script>
$(document).ready(function() {
    tinymce.init({
    selector:'#contents',
    schema:'html5',
    theme:'modern',
    mobile: {
        theme:'mobile',
        // plugins: [ 'autosave', 'lists', 'autolink' ],
        // toolbar: [ 'undo', 'bold', 'italic', 'styleselect' ]
    },
    skin: 'lightgray',
    language: 'es_MX', 
    // width: 600,
    // height: 300,
    // max_height: 500,
    // max_width: 500,
    // min_height: 100,
    // min_width: 400,
    // content_css: 'css/content.css',
    statusbar: true,
    inline: false,
    plugins: 'code ',
    toolbar: [
        'newdocument | bold | italic underline strikethrough alignleft aligncenter alignright alignjustify styleselect formatselect fontselect fontsizeselect cut copy paste bullist numlist outdent indent blockquote undo redo removeformat subscript superscript',
        'code'
    ],
    menubar: false,
    browser_spellcheck: true,
    contextmenu: false,
    // code_dialog_height: 300,
    // code_dialog_width: 350
    });
});
</script>

@endpush

Recursos

  1. TinyMCE documentation
    https://www.tiny.cloud/docs/quick-start/
  2. Advanced Install
    https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#composer
  3. Mobile
    https://www.tiny.cloud/docs/mobile/
  4. Languages
    https://www.tiny.cloud/docs/general-configuration-guide/localize-your-language/
  5. Plugins
    https://www.tiny.cloud/docs/plugins/
  6. Upload Images
    https://www.tiny.cloud/docs/general-configuration-guide/upload-images/
  7. Laravel Compiling Assets (Mix)
    https://laravel.com/docs/5.7/mix

Evitar que WordPress remueva los saltos de línea de los artículos

Introducción.

Wordpress logo

  Son muy pocos los problemas que he tenido con WordPress a lo largo de estos varios años escribiendo en el blog.  Uno de los casos mas molestos sucede cuando los saltos de línea de los artículos o comentarios empiezan a desaparecer. 

Este problema me sucedió inicialmente cuando utilizaba Google Chrome únicamente, sin embargo en los últimos días empezó a suceder con Mozilla Firefox 5 también, así que tuve que descartar la explicación de incompatibilidad con el primer navegador.

Después de una búsqueda en los foros no he encontrado cual es la causa específica del problema sin embargo parece estar en TinyMCE, el editor WYSIWYG que incluye WordPress por defecto.  Para este problema he encontrado una solución muy simple que parece estar funcionando bien hasta el momento.

Solución.

La solución consiste en instalar el plugin TinyMCE Advanced y acceder a sus opciones de configuración mediante la opción Settings > TinyMCE Advanced del menú izquierdo del Dashboard.

En la sección de opciones avanzadas, seleccionar la casilla de verificación correspondiente con la opción para evitar que se remuevan automáticamente las etiquetas <p> y <br>.

Activar esta opción de la configuración de TinyMCE Advanced
Activar esta opción de la configuración de TinyMCE Advanced

Presionar el botón Save Changes para aceptar los cambios y verificar que estos hayan tenido el efecto deseado.