@ckeditor/ckeditor5-source-editing

What is @ckeditor/ckeditor5-source-editing?

@ckeditor/ckeditor5-source-editing is a plugin for CKEditor 5 that allows users to switch between the WYSIWYG editor and the source code view. This is particularly useful for users who need to edit the HTML source code directly.

What are @ckeditor/ckeditor5-source-editing's main functionalities?

Enable Source Editing

This code snippet demonstrates how to enable the Source Editing plugin in a CKEditor 5 instance. By adding the SourceEditing plugin to the extraPlugins array, users can toggle between the WYSIWYG editor and the source code view.

ClassicEditor.create(document.querySelector('#editor'), { extraPlugins: [ SourceEditing ] })

Toggle Source Editing Mode

This code snippet shows how to programmatically toggle the source editing mode in CKEditor 5. By executing the 'sourceEditing' command, the editor switches between the WYSIWYG view and the source code view.

editor.execute('sourceEditing');

Other packages similar to @ckeditor/ckeditor5-source-editing

tinymce

TinyMCE is a popular WYSIWYG HTML editor that also offers a source code editing mode. It provides a similar feature set to @ckeditor/ckeditor5-source-editing, allowing users to switch between visual and code views.

quill

Quill is another WYSIWYG editor that supports source code editing through extensions. While it is not as feature-rich as CKEditor 5, it provides a lightweight alternative for basic source code editing needs.

froala-editor

Froala Editor is a lightweight WYSIWYG editor that includes a source code view feature. It offers a similar user experience to @ckeditor/ckeditor5-source-editing, with a focus on ease of use and performance.

README

CKEditor 5 source code editing feature

This package implements the source code editing support for CKEditor 5 that allows you to view and edit the source of the document.

Installation

This plugin is part of the ckeditor5 package. Install the whole package to use it.

npm install ckeditor5

Create free account

If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.

Demo

Check out the demo in the source code editing feature guide.

Documentation

See the @ckeditor/ckeditor5-source-editing package page as well as the source editing feature guide in the CKEditor 5 documentation.

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.