onChange last character is missing in Editor

1 Answer 78 Views

Editor

Hyunrip asked on 23 May 2022, 08:15 AM

I have a same issue in a last question from someone.

last character is still missing when onChange is called.

ProseMirror that Shane said is not working for me.

Source code is simple

<Editor tools={[
        [Bold, Italic, Underline, Strikethrough],
        [Subscript, Superscript],
        [AlignLeft, AlignCenter, AlignRight, AlignJustify],
        [Indent, Outdent],
        [OrderedList, UnorderedList],
        FontSize,
        FontName,
        FormatBlock,
        [Undo, Redo],
        [Link, Unlink, InsertImage, ViewHtml],
        [InsertTable],
        [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
        [DeleteRow, DeleteColumn, DeleteTable],
        [MergeCells, SplitCell],
      ]} contentStyle={{
        height: 320
      }}
        onChange={changeEventHandler}
/>

 const changeEventHandler = (e) => {
    if (e.target.view) {
      const view = e.target.view;
      if (view) {
        let htmlTxt = EditorUtils.getHtml(view.state);
        console.log(htmlTxt)
        // props.setContent(htmlTxt);
      }
    }
  }

"5" is missing!

How can I solve this?

1 Answer, 1 is accepted

Accepted

answered on 24 May 2022, 08:34 PM

Hi Hyunrip,

I have answered to your question in the other forum thread, but I will share the answer here as well:

The issue that you are facing is the same as the one in the original post, where the value is extracted from the state, which will not be updated at this stage (within the onChange event). Please use the approach demonstrated in the following example instead:

https://stackblitz.com/edit/react-tsp7kn-wkec1f?file=app%2Fmain.jsx

const onChange = (ev) => {
    console.log(ev.html);
  };

The approach that you are using is suitable for scenario when the HTML needs to be retrieved outside of the onChange event.

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Hyunrip

commented on 27 May 2022, 12:27 AM

It's simple! I had referred the tutorials "get html & set html". but this is better way to apply.

I appreciate your kind answer.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

onChange last character is missing in Editor

1 Answer, 1 is accepted