Tinymce:

TinyMCE es un editor de texto WYSIWYG para HTML de código abierto que funciona completamente en JavaScript y se distribuye gratuitamente bajo licencia LGPL

Para hacer uso de el descargamos el paquete, lo descomprimimos y lo guardamos en la carpeta js public, en mi caso la ruta quedo assets/js/tinymce/tinymce.min.js, incluimos este archivo en la nuestra plantilla principal, normalmente en la ultima de nuestro layaouts de la siguiente manera:

<script src="{{ URL::to('assets/js/tinymce/tinymce.min.js')}}">
</script>

Luego incluimos el script de la siguiente manera:

<script>
 var editor_config = {
      path_absolute : "{{ URL::to('/') }}/",
      selector : "textarea",
      plugins: [
        "advlist autolink lists link image charmap print preview 
hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars 
code fullscreen",
        "insertdatetime media nonbreaking save table 
contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
      ],
      toolbar: "insertfile undo redo | styleselect | bold italic 
| alignleft aligncenter alignright alignjustify | bullist numlist 
outdent indent | link image media",
      relative_urls: false,
      file_browser_callback : function(field_name, url, type, win) {
        var x = window.innerWidth || document.documentElement.
clientWidth || document.getElementByTagName('body')[0].clientWidth;
        var y = window.innerHeight|| document.documentElement.
clientHeight || document.grtElementByTagName('body')[0].clientHeight;
        var cmsURL = editor_config.path_absolute+
'laravel-filemanaget?field_name'+field_name;
        if (type = 'image') {
          cmsURL = cmsURL+'&type=Images';
        } else {
          cmsUrl = cmsURL+'&type=Files';
        }

        tinyMCE.activeEditor.windowManager.open({
          file : cmsURL,
          title : 'Filemanager',
          width : x * 0.8,
          height : y * 0.8,
          resizeble : 'yes',
          close_previous : 'no'
        });
      }
    };

    tinymce.init(editor_config);
  </script>

Ahota todos los textarea que creemos en las plantillas blade que hereden este layouts, tomaran el formato de este editor de texto.

 

<div class="form-group">
	{!!Form::label('Editor','Editor de texto:')!!}
	{!!Form::textarea('campo',null,['class'=>'form-control'])!!}
</div>

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *