Как только заходит речь о WYSIWYG редакторе, то у всех сразу всплывает из подсознания два таких монстра, как CKEditor и TinyMVC. Бесспорно - это отличнейшие проекты, которые имеют громадный функционал. Но также они имеют и громадный размер.

А еще встречается проблема, что прикрутить их к тому или иному WEB проекту не всегда тривиальная задача. Огромные дистрибутивы, множество файлов настроек, приличный пакет документации - это только один из моментов, с которым вы столкнетесь при установке этих решений.

Но давайте себе ответим на один вопрос. А что нам нужно от текстового редактора? Я буду загибать свои пальцы:

• возможность работать всегда и везде
• очень маленький размер дистрибутива
• минимальный набор необходимого функционала
• быстрая скорость загрузки
• элементарная интеграция в любое текстовое поле
• возможность простой и быстрой настройки под свои нужды
• красивая загрузка файлов в сам редактор (файл при этом можно сохранить на диске)
• красивое удаление файлов из редактора (файл при этом можно удалить с диска)
• возможность написать свой плагин (легко и быстро)

Как бы не были хороши вышеназванные мной редакторы, но по многим пунктам они не очень подходят. А все потому, что они из простого решения превратились уже сами в реальные фреймворки.

Я же могу предложить, для большинства разработчиков и пользователей, более простое и гибкое решение. Простой редактор, созданный на Bootstrap, который весит всего 500Кб - Summernote. И это вместе с плагинами и файлами локализации!

В нем есть все самое необходимое, которого вполне достаточно для создания любого контента. Помимо этого он простой, легкий, в нем уже есть возможность вставлять видео и изображения.

Но самое главное - это то, что на сохранение и удаление изображений можно легко навесить свои обработчики. А это означает, что вы можете легко и не принуждено организовать систему автозагрузки и автоудаления изображений на диске.

Давайте создадим в resources/assets/js/ файл и назовем его, к примеру, summernote_editor_settings.js

Внутри напишем такой код:

/**
 * Settings for summernote editor.
 */

$(document).ready(function () {

    $(document).ready(function () {

        var editor = $('#editor-body');

        var configFull = {
            lang: 'ru-RU', // default: 'en-US'
            shortcuts: false,
            airMode: false,
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false, // set focus to editable area after initializing summernote
            disableDragAndDrop: false,
            callbacks: {
                onImageUpload: function (files) {
                    uploadFile(files);
                },

                onMediaDelete: function ($target, editor, $editable) {

                    var fileURL = $target[0].src;
                    deleteFile(fileURL);

                    // remove element in editor
                    $target.remove();
                }
            }
        };

        // Featured editor
        editor.summernote(configFull);

        // Upload file on the server.
        function uploadFile(filesForm) {
            data = new FormData();

            // Add all files from form to array.
            for (var i = 0; i < filesForm.length; i++) {
                data.append("files[]", filesForm[i]);
            }

            $.ajax({
                data: data,
                type: "POST",
                url: "/ajax/uploader/upload",
                cache: false,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                contentType: false,
                processData: false,
                success: function (images) {
                    //console.log(images);

                    // If not errors.
                    if (typeof images['error'] == 'undefined') {

                        // Get all images and insert to editor.
                        for (var i = 0; i < images['url'].length; i++) {

                            editor.summernote('insertImage', images['url'][i], function ($image) {
                                //$image.css('width', $image.width() / 3);
                                //$image.attr('data-filename', 'retriever')
                            });
                        }
                    }
                    else {
                        // Get user's browser language.
                        var userLang = navigator.language || navigator.userLanguage;

                        if (userLang == 'ru-RU') {
                            var error = 'Ошибка, не могу загрузить файл! Пожалуйста, проверьте файл или ссылку. ' +
                                'Изображение должно быть не менее 500px!';
                        }
                        else {
                            var error = 'Error, can\'t upload file! Please check file or URL. Image should be more then 500px!';
                        }

                        alert(error);
                    }
                }
            });
        }

        // Delete file from the server.
        function deleteFile(file) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "/ajax/uploader/delete",
                cache: false,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                contentType: false,
                processData: false,
                success: function (image) {
                    //console.log(image);
                }
            });
        }

    });

});

В принципе из кода понятно, что редактор будет цепляться на элемент с id="editor-body". Это должен быть textarea тэг:

<div class="form-group">
    <div class="form-group{!! $errors->has('body') ? ' has-error' : '' !!}">
        {!! Form::label('body', 'Body' . ':', ['class' => 'control-label']) !!}
        {!! Form::textarea('body', NULL, ['class' => 'form-control', 'id' => 'editor-body']) !!}

        @if ($errors->has('body'))
            <span class="help-block">
                <strong>{!! $errors->first('body') !!}</strong>
            </span>
        @endif
    </div>
</div>

Что касается обработчиков, то они уже настроены на работу пакета для управления изображениями UploadImage.

Нужно не забыть добавить наш файл настроек в gulp файл (исхожу из того, что elixir laravel у вас подключен):

// Copy editor settings for summernote.
mix.copy('resources/assets/js/summernote_editor_settings.js', 'public/js/summernote_editor_settings.js');

В данном конкретном случае я просто скопировал файл. Также стоит не забывать, что у вас должен быть подключен Bootstrap:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Подключать его нужно в главном шаблоне: app.blade.php

Сам же дистрибутив Summernote нужно разместить в папке public, например в public/modules/summernote

Теперь в шаблоне формы, где будет ваш редактор, нужно подключить три файла: сам редактор, файл локализации и файл с вашими настройками.

{{-- Add wysiwyg script --}}
<script src="{!! asset('modules/summernote/summernote.js') !!}"></script>

{{-- Include summernote-ru-RU --}}
<script src="{!! asset('modules/summernote/lang/summernote-ru-RU.js') !!}"></script>

{{-- Include editor settings file for users --}}
<script src="{!! asset('js/summernote_editor_settings.js') !!}"></script>

Вот и все! В итоге вы получите возможность не просто добавлять тексты и форматировать их, но и легко добавлять изображения в ваш текст, не заботясь о том, как их загрузить на сервер, а потом удалить. Все будет происходить автоматически! При этом, за раз мы можете выделить сразу десять файлов и они одним махом вставятся в редактор.

Легко, просто и гибко. До новой встречи. Всем удачи.