tinymce-angular
tinymce-angular copied to clipboard
feat: Editor as directive
I separated the Editor component logic into a directive and a component that inherits from it.
With this change, the directive can be directly attached to a host element like a textarea without having to create custom nodes.
Example:
<textarea editor [(ngModel)]="text"
[init]="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
></textarea>
It should be compatible with all previous implementations, as the component have the same inputs and outputs as it used to have, and the directive has mostly the same API as the component, except for the id and tagName inputs.
Hi @javiermarinros, thanks for putting in the time to make this PR.
I think it's an interesting idea and novel. In my opinion though I think it's quite narrow in its use case. A directive to me should be able to be used across a variety of elements, whereas this one can only be used on a textarea. The changes it makes to the textarea is quite substantial as well, giving more support to the idea that it's a full blown component and should look as such in the template it's used. It should also be said that it does add more complexity in having a directive that the component now uses and a whole relationship there that wasn't needed before.
That's my thoughts on it for now. If others think differently or if there's significant want/need for this in the future we'll certainly consider it.
Hi @danoaky-tiny thank you for your review. Just some remarks:
- It can be used with any element with
[editor]attribute, not only textareas. - The relationship between the Component and the Directive is quite simple, as the component inherits all the code from the directive using OOP. The Component code is actually quite simple.
- They are marked as standalone, following the latest Angular trends. This is completely transparent and compatible for code bases still using Angular modules.
- The PR also resolves some strange code patterns, such as the use of an empty template in the controller:
template: '<ng-template></ng-template>'