Topic: MDB wysiwyg last character is lost

twj priority asked 5 years ago


I've bought wysiwyg editor, but after installation and trying to save data last character disappears.

Example: I write: "test text". I get: "< p>test tex< / p>" - no 't' at the end

And this goes for every sentence I write. I use jQuery 3.3.1 and get textarea value

Any ideas?

Thanks in advance for your help


Bartłomiej Malanowski staff commented 5 years ago

How can I reproduce this issue?


twj priority commented 5 years ago

I thinks it's a bug inside a component, isn't it? In next post I've attached screenshots, even after alert() it goes without last character


twj priority answered 5 years ago


Hello, have this issue been fixed?


Grzegorz Bujański staff commented 4 years ago

Hi, Yes it has been fixed.


twj priority answered 5 years ago


Hello! Any update? I still have issues listed in the last response in this topic, even I just upgraded to the lastest version 4.8.7

Please help me


MDBootstrap staff commented 5 years ago

I checked the status of this ticket in our todo list and it wasn't solved. I moved it to high priority list so it will be fixed in the next release cycle because in this release we have already assigned tasks. I am sorry this is open for that long.


twj priority answered 5 years ago


Thanks for your answer! But it still doesn't work properly.

So what I've done to test after I replaced keypress with keydown in JS file:

Get data via POST and save it directly to database (without any changes for test steps) - the same with alerts or console.log() for viewing the result

1) Type: "Testing WYSIWYG editor"

Result: "Testing WYSIWYG edito" - just text without last character

2) Change to: "Testing WYSIWYG editor to use it in my project" and make it Bold

Result: "Testing WYSIWYG editor to use it in my project" - last character is now here, but no BOLD tags and paragraph tags at all

3) Breakline and type: "Testing WYSIWYG editor to use it in my projectTest center line", put "Test center line" at the center of the screen

Result: "<b>Testing WYSIWYG editor to use it in my project</b><div><b>Test center line</b></div>" - some "divs" came and no central position (after update from DB). Still not bold

4) Then I removed all text and typed: "Why my text is not shown as I type it?" - I've made it BOLD and ITALIC

Result: "Why my text is not shown as I type it" - last char is on it's place, but no tags, text only...

Please help me to fix these bugs, I need text editor in my project =)

Thanks;)


Bartłomiej Malanowski staff commented 5 years ago

The issue with disappearing the last character has been resolved by replacing keypress with keydown. I was also able to recreate your issue with the "bold". That's the something that I'm going to fix in the nearest future


twj priority commented 5 years ago

Okay ,thanks, waiting for it! ;)



Thank you for providing the details. I spent some time to recreate your issue and debug the problem, but it was worth it! It's a bug that will be fixed in the nearest release (next release will be shipped on 4th March. If you don't want to wait I can tell you how to fix it ;)

This makes me kinda ashamed, but when I was creating the WYSIWYG editor, I used a wrong event to update the value of the native textarea. I used the "keypress" so the value is being updated just before you type the next letter so to fix it up, we need to "wait" for the letter to be "printed". To fix it, open the wysiwyg.js file and locate the following line:

$("#wysiwyg-".concat(this.uuid)).on('keypress', this.updateNativeTextarea.bind(this));

Then, replace the "keypress" with "keydown":

$("#wysiwyg-".concat(this.uuid)).on('keydown', this.updateNativeTextarea.bind(this));

rakesh kotian free commented 4 years ago

Canr find this element in js


twj priority answered 5 years ago


So, what I've done by steps:

  1. I included CSS and JS files for WYSIWYG plugin, second goes at the end of page:<link rel="stylesheet" href="../assets/css/wysiwyg.css">``<script type="text/javascript" src="../assets/js/wysiwyg.min.js"></script>

  2. I created textarea <textarea id="personalNotes" name="personal-notes"></textarea>

  3. Then I've bound this plugin to textarea as described in it's tutorial $("#personalNotes").mdbWYSIWYG();

So now, when I want to get it's content, for example I put a button with jQuery method and trying to get text I've typed:

<button type="button" id="btn-save-notes" class="btn btn-primary btn-sm">Save</button>

$('#btn-save-notes').on('click', function(e) {<br> alert($('#personalNotes').val());<br> });

If i type "My text is here", I get <p>My text her</p> in alert box, part of text is missed


twj priority answered 5 years ago


Maybe this bug happen when we get contents from textarea which WYSIWYG is bound to, because if I get value of standart textarea - I get everything I've typed, and after I bind WYSIWYG plugin to it - there is a result without last character.

If I type "TEST" - the result is "TES".

Examples:

https://photos.app.goo.gl/feGPah3JkX4iYS318 https://photos.app.goo.gl/uYNMGUT5P8Nmocta7


Bartłomiej Malanowski staff commented 5 years ago

I'm trying to recreate this issue, but everything works fine. Can you point me how can I reproduce your issue? Can you share your code with us?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: Other
  • MDB Version: -
  • Device: Laptop
  • Browser: All
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags