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
$ composer require tinymce/tinymce
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
- TinyMCE documentation
https://www.tiny.cloud/docs/quick-start/ - Advanced Install
https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#composer - Mobile
https://www.tiny.cloud/docs/mobile/ - Languages
https://www.tiny.cloud/docs/general-configuration-guide/localize-your-language/ - Plugins
https://www.tiny.cloud/docs/plugins/ - Upload Images
https://www.tiny.cloud/docs/general-configuration-guide/upload-images/ - Laravel Compiling Assets (Mix)
https://laravel.com/docs/5.7/mix
Ya que los iconos de Bootstrap han sido removidos de la distribución, se recomienda que se utilicen iconos de terceros en los proyectos web. FontAwesome es una excelente alternativa para estas imágenes.
A continuación se describe el procedimiento para instalar bajo Ubuntu Linux la aceleración por hardware de las máquinas virtuales de Android (AVD) para correr imágenes del sistema operativo basadas en x86.
Si previamente se ha 
A continuación se realizarán los pasos necesarios para liberar el bootloader de un