oqtane / oqtane.framework

CMS & Application Framework for Blazor & .NET MAUI
http://www.oqtane.org
MIT License
1.84k stars 529 forks source link

[ENH] RichTextEditor with Quill #4367

Open maxmontgmx opened 2 months ago

maxmontgmx commented 2 months ago

Hi all, I'm looking at RichTestEditor which is using Quill JS component. It misses some feture for my needs. I manage to get keyboard event by giving back the index of cursor. Now I try to get the line (text) where the cursor is. It's exist getLine function in Quill API but I don't know getting the content of the line

I did : let [line, offset] = editorElement.__quill.getLine(index)

But I don't know what I have to do after.

If somebody knows how "Block Blot" is working, it would be great.

I have already post on quill github for help without response.

Thanks in advance for your help

sbwalker commented 2 months ago

@maxmontgmx I would encourage you to look at #4358. The 5.2 release will include an abstraction for RichTextEditorProviders. This will enable developers to create alternative providers. This abstraction is going to change how RichTextEditors can be customized. The code in the Dev branch already has a partial implementation of the abstraction but there will be some more changes required. What I would suggest is that in 5.2 you will have the ability to create your own QuillJS editor where you will have the ability to customize it based on your requirements (ie, you will not need to rely on the Oqtane framework to provide specific features you need in the editor).

maxmontgmx commented 2 months ago

@sbwalker , I wrote a new js file which extends the js fie in the framework. My JS file is located in my module. And it's working like that. And quill editor is great, I don't want to use another one. My question is specific to quill function GetLine

sbwalker commented 2 months ago

@maxmontgmx in 5.2.0 the Quill editor will continue to be the default RichTextEditor provided with the framework.

I do not have any experience customizing the Quill editor. Perhaps someone else will be able to assist you.

maxmontgmx commented 2 months ago

I think I was not so clear. I dont want to customize quill editor. Just want to get Line content text where thé cursor is. Could be implemented in the richtexteditor component. Thanks

sbwalker commented 2 months ago

You can leave this item open. Technically it is an enhancement so I will mark it as such in the title as this is how Issues are managed (and also why there are templates for creating Issues).

The RichTextEditorProvider abstraction and Search capability are the highest priorities at the moment so it likely will not be included in the 5.2 release. In addition, the RichTextEditorProvider abstraction will change the patterns for how RichTextEditors can be extended so this change would need to wait until after the provider model is finalized.

maxmontgmx commented 2 months ago

@sbwalker I found the solution to my issue getQuillLine: function (editorElement, index) { var [line, offset] = editorElement.__quill.getLine(index) if (line) { var lineStartIndex = editorElement.__quill.getIndex(line); var lineText = editorElement.__quill.getText(lineStartIndex, line.length()); return lineText; } return null; }, it could be usefull for other guys... Thanks

sbwalker commented 1 month ago

@maxmontgmx is there any action required on this issue? With the text editor abstraction in 5.2, this customization would need to be added to the QuillJSTextEditor rather than the RichTextEditor.

KyleDEV commented 1 week ago

Well, Quill basically has a problem on iOS safari with 2byte character set fonts like Korean fonts. I would rather use tinyMCE but the license is GPL.