Smart.Editor

[Catdoken]

I am looking into using the Smart.Editor component as a potential replacement for our text editor. Is there a way to programmatically set the following?

• Enter key writes newline (br) to the editor rather than a paragraph (p). Shift+Break works as expected, but it will be easier on our users to use Enter.
• Text characters typed are uppercase; never lowercase.

Before looking at ways to programmatically (or use CSS) handle this on our own I’d like to check here first. Are there any options I may have missed in setting up the Editor or established ways to accomplish this that are built into the code base?

Thanks!

• This topic was modified 1 year, 4 months ago by Catdoken.
• This topic was modified 1 year, 4 months ago by Catdoken.

[ivanpeevski]

Hi Catdoken,

 

Thanks for the interest in our products!

At the moment, we do not have built-in properties to achieve these, however they can also be implemented programmatically with some additional code:

1. You can overwrite the default behavior of the  editor by handling the ‘keydown’ event and calling event.preventDefault()
2. The text-transform: uppercase CSS rule will automatically transform all characters to uppercase. However the change is only visual, so when you receive the Editor value you should also add a toUpperCase call to change its value

Here is an example with both functionalities implemented: codepen

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</span>

[Catdoken]

Hi Ivan,

Thanks for the response.

For keydown I did try stopping the event and instead sending a new one that was Shift+Enter via dispatchEvent, but that did not work. I got a response from the editor (onChanging) but with no actual change to the text when looking at oldValue/newValue. I did not try your implementation of creating the text node manually. I’ll give that a shot.

Thanks!

[Catdoken]

Ivan,

A quick question if you have time – is it possible to paste text copied from a primitive editor, such as notepad, into the editor and have it retain its format instead of all one line?

For example:

FIRST LINE
SECOND LINE

I tried setting editmode to markdown which addresses the Enter key question earlier as well as handles the paste as we were hoping. It does handle styling differently which was expected. It may be it is not possible to have the best of both – styling ability + paste like markdown.

Thanks!

[Catdoken]

As an update I am hijacking the paste event and inserting text into the editor manually. Was hoping to not have to do that, but its no problem. There are a few ways the editor can handle paste events and was not sure if there is a setting to use for this looking at the examples provided.

Thanks for your time.

[milywills]

good

[Author]

Posts