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 div
s, 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.