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

Instalación de Laravel 5 en Ubuntu

Instalación de Composer

$ curl -sS https://getcomposer.org/installer | php

$ sudo mv composer.phar /usr/local/bin/composer

Instalación de Laravel

$ composer global require "laravel/installer=~1.1"

Actualizar el PATH para incluir la herramienta de laravel.

$ vi ~/.bashrc

    PATH=$PATH:~/.composer/vendor/bin/

Creación de un nuevo proyecto

$ laravel new nuevo-proyecto

Verificar la versión de Laravel instalada.

$ cd nuevo-proyecto

$ php artisan -V

Ejecución del servidor web embebido para desarollo

$ php artisan serve

Acceder al proyecto desde un navegador web y el URL http://localhost:8000.

Para utilizar esta funcionalidad de artisan debe tenerse instalado mcrypt.  En caso de no contarse con esta librería seguir los pasos a continuación.

$ sudo aptitude install php5-mcrypt

$ sudo php5enmod mcrypt

Recursos