TallEditor

The TallEditor is a simple Edito. It is based on Prosemirror which is a solid foundation for any kind of Editor.

What is different?

Avoiding complexity of CKE, TInyMCE etc..

With TallEditor simply define two divs, one for the Editor itself and one for the Menu. In the Menu div simply add Buttons with a data-command attribute, which defines what the Button should do, once clicked.

Full control over the markup. Styling with Tailwind. Use Alpine.JS (or JS in general) to create Dropdown or something within the Toolbar.

How does it work?

Simple setup:

<div 
    x-data="{
        content: 'Lorem ipsum dolor sit amet'
    }" 
    class="bg-gray-200 border border-gray-900"
>
    <tall-editor x-model="content">
        <div data-type="menu">
            <button 
                type="button" 
                data-command="strong" 
                data-active-class="bg-blue-400" 
                class="bg-gray-500"
            >
                Bold
            </button>
            <button 
                type="button" 
                data-command="em" 
                data-active-class="bg-blue-400" 
                class="bg-gray-500"
            >
                Emphasize
            </button>
            <button 
                type="button" 
                data-command="code" 
                data-active-class="bg-blue-400" 
                class="bg-gray-500"
            >
                Code
            </button>
            <button 
                type="button" 
                data-command="heading" 
                data-level="1"
                data-active-class="bg-blue-400" 
                class="bg-gray-500"
            >
                H1
            </button>
        </div>

        <div data-type="editor" class="p-2">
        </div>
    </tall-editor>
</div>

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

License

Copyright © 2022 Coding Wisely

Licensed under the MIT license, see LICENSE.md for details.