Как только заходит речь о WYSIWYG редакторе, то у всех сразу всплывает из подсознания два таких монстра, как CKEditor и TinyMVC. Бесспорно - это отличнейшие проекты, которые имеют громадный функционал. Но также они имеют и громадный размер.
А еще встречается проблема, что прикрутить их к тому или иному WEB проекту не всегда тривиальная задача. Огромные дистрибутивы, множество файлов настроек, приличный пакет документации - это только один из моментов, с которым вы столкнетесь при установке этих решений.
Но давайте себе ответим на один вопрос. А что нам нужно от текстового редактора? Я буду загибать свои пальцы:
Как бы не были хороши вышеназванные мной редакторы, но по многим пунктам они не очень подходят. А все потому, что они из простого решения превратились уже сами в реальные фреймворки.
Я же могу предложить, для большинства разработчиков и пользователей, более простое и гибкое решение. Простой редактор, созданный на Bootstrap, который весит всего 500Кб - Summernote. И это вместе с плагинами и файлами локализации!
В нем есть все самое необходимое, которого вполне достаточно для создания любого контента. Помимо этого он простой, легкий, в нем уже есть возможность вставлять видео и изображения.
Но самое главное - это то, что на сохранение и удаление изображений можно легко навесить свои обработчики. А это означает, что вы можете легко и не принуждено организовать систему автозагрузки и автоудаления изображений на диске.
Давайте создадим в resources/assets/js/ файл и назовем его, к примеру, summernote_editor_settings.js
Внутри напишем такой код:
/**В принципе из кода понятно, что редактор будет цепляться на элемент с id="editor-body". Это должен быть textarea тэг:
* 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);
}
});
}
});
});
<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>
// Copy editor settings for summernote.В данном конкретном случае я просто скопировал файл. Также стоит не забывать, что у вас должен быть подключен Bootstrap:
mix.copy('resources/assets/js/summernote_editor_settings.js', 'public/js/summernote_editor_settings.js');
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>Подключать его нужно в главном шаблоне: app.blade.php
{{-- 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>
Комментарии (19):
If found the solution:
PS: to caluclate the number, you need to multiply
1024
. Example:"(1/1) FatalErrorExceptionClass 'Form' not foundin b2fc94541818c0b6867b9efee56039f0e07fce51.php (line 60) "