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
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! ;)
Bartłomiej Malanowski staff answered 5 years ago
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));
twj priority answered 5 years ago
So, what I've done by steps:
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>
I created textarea
<textarea id="personalNotes" name="personal-notes"></textarea>
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: Other
- MDB Version: -
- Device: Laptop
- Browser: All
- OS: Win 10
- Provided sample code: No
- Provided link: No
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