search

Blazored / TextEditor

Rich text editor for Blazor applications - Uses Quill JS
MIT License
276 stars 58 forks source link

Enable css styling #58

Closed koddek closed 1 year ago

koddek commented 1 year ago

The new property names can be modified. The essential aspect is the flexibility to customize both the Toolbar and the Editor. This customization capability proves helpful in resolving an issue encountered while using the Editor on Android. Specifically, when text is selected within the Editor, the Android popup text selector conceals the Toolbar buttons, rendering them unusable. By adding padding to the top of the editor, this problem can be effectively resolved. Additionally, enabling styling on the Editor becomes an added advantage.

ADefWebserver commented 1 year ago

This has breaking changes. Right now BottomToolbar has to be passed. People upgrading the component will suddenly get errors. Also, they will be expected to pass styles and their existing applications will change if the styles are not passed. The styles is too radical of a change. Allowing the toolbar to be at the bottom, if it is coded to not be a breaking change is something I could consider. Thank you

koddek commented 1 year ago

This change does not cause any issues with existing code. If the user doesn't want the Toolbar below the Editor, they can simply ignore the BottomToolbar property. If they do want the Toolbar below, they can then set the BottomToolbar property to true.

This is how I use it in an app:

<BlazoredTextEditor
        EditorCssClass="my-8 border-0"
        Placeholder="Enter non HTML format like centering..."
        @ref="@richEditor"
        ToolbarCSSClass="border-b border-x-0 border-t-0 border-solid">
    <ToolbarContent>
        @((MarkupString) toolbar)
    </ToolbarContent>
    <EditorContent>
        @((MarkupString) body)
    </EditorContent>
</BlazoredTextEditor>
ADefWebserver commented 1 year ago

Let me test it out this weekend. Thank You

ADefWebserver commented 1 year ago

Ok I see it doesn't break the exiting code 👍🏾 However, can you submit a PR that adds examples (please keep existing examples) to the sample pages. Also update README.md to include descriptions for explaining exactly how users are to use this? For example, in your sample above how would they define toolbarand body? Thank You!

koddek commented 1 year ago

I created another PR built on this one that contains the stuff you asked for.

ADefWebserver commented 1 year ago

Everything is merged and released. Thank You!