Summernote is a JavaScript library that helps you create WYSIWYG editors online.
In this version of Summernote, Bootstrap has been entirely removed. However, it still retains a default styling for editor elements similar to Bootstrap to maintain coherence. Additionally, it incorporates some special features.
- Paste images from clipboard.
- Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all.
- Simple UI.
- Interactive WYSIWYG editing.
- Handy integration with server.
- Translation support for German, Chinese, Spanish, French, English, Portuguese, Polish, Russian.
Installation.
The preferred way to install this extension is through composer.
Either run.
composer require --dev --prefer-dist yii2-extensions/summernoteor add to the require section of your composer.json file."yii2-extensions/summernote": "dev-main"Usage in active form.
use Yii2\Extensions\Summernote\Summernote;
<?=
$formModel,
'content',
)->widget(
Summernote::class,
[
'blockTags' => ['blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
'focus' => true,
'height' => 200,
'lineHeights' => ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0'],
'maxHeight' => null,
'minHeight' => null,
'placeholder' => 'Write here...',
'toolbar' => [
['style', ['block', 'inline']],
['font', ['bold', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']],
],
)
?>
Warning - code injection.
The code view allows the user to enter script contents. Make sure to filter/sanitize the HTML on the server. Otherwise, an attacker can inject arbitrary JavaScript code into clients. With Filepond, we don't need to rely on Yii2 helpers or validations for file uploads.
Happy coding!