Topic: WYSIWYG Editor
**Expected behavior****Actual behavior**I am attempting to use an WYSIWYG Editor, using the following code:It doesn't work. Thank you for your assistance!
Quiz
window.dataLayer = window.dataLayer || [];MDBootstrap WYSIWYG Editor Features:
- Changing block type
- Text formatting (bold, italic, strikethrough, underline)
- Setting text color
- Setting color highlight
- Text aligning
- Creating a list (bulled or numbered)
- Increase/Decrease indent
- Inserting links
- Inserting pictures
- Insert horizontal line
- show HTML code
- Undo/Redo
Options:
- Translations
- Using your own color palette
- Disabling/enabling sections
Methods:
- Get HTML code from editor
//const wysiwygElement = document.getElementsByClassName('wysiwyg')[0]; //$('.wysiwyg').wysiwyg(); const wysiwygElement = document.getElementById('wysiwyg0'); //str = JSON.stringify(wysiwygElement); //str = JSON.stringify(wysiwygElement, null, 4); // (Optional) beautiful indented output. //console.log(str); // Logs output to dev tools console. //const wysiwygInstance = WYSIWYG.getInstance(wysiwygElement); //alert(wysiwygInstance.getCode()); function ver_and_subm() { document.quiz_form.submit(); } // Example starter JavaScript for disabling form submissions if there are invalid fields
Unfortunately, your code is not formatted and I am not sure if this is the entire code you wanted to send us.
Can you create a snippet with an example and describe what exactly doesn't work?
MDBootstrap WYSIWYG Editor Features:
- Changing block type
- Text formatting (bold, italic, strikethrough, underline)
- Setting text color
- Setting color highlight
- Text aligning
- Creating a list (bulled or numbered)
- Increase/Decrease indent
- Inserting links
- Inserting pictures
- Insert horizontal line
- show HTML code
- Undo/Redo
Options:
- Translations
- Using your own color palette
- Disabling/enabling sections
Methods:
- Get HTML code from editor
Grzegorz Bujański staff commented 6 months ago
Unfortunately, again the code was converted to text. Create a snippet or if you paste code here, mark it as code so the editor doesn't convert it to text. Just select the pasted fragment and use the keyboard shortcut ctrl + k
I am trying to use a basic example of MDBootstrap WYSIWYG Editor. Source page: https://mdbootstrap.com/docs/standard/plugins/wysiwyg-editor/
<div class="wysiwyg" data-mdb-wysiwyg-init>
Test
</div>
I can see "Test" , but it doesn't work as a plugin that enables rich text editing on our website.
The code you sent is correct and should work.
There are 3 possibilities why WYSIWYG is not working on your website:
- You are importing wysiwyg incorrectly on your page
- There are some errors in the console that block code execution and therefore WYSIWYG is not initialized.
- Wysiwyg is added dynamically and requires manual init
So we need information on how you add WYSIWYG on your page? Do you have any errors in the console? Do you use any framework, e.g. ASP.NET or React?
KPHCRoman pro premium priority commented 6 months ago
You are importing wysiwyg incorrectly on your page - Code is correct (as you mentioned.) Import:
<!-- MDB -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="node_modules/smartmenus/dist/jquery.smartmenus.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<!-- //======================= End Bootstrap=================================================== -->
<link rel="stylesheet" href="../../MDB5_STANDARD_UI_KIT_Pro/css/mdb.min.css" />
<link rel="stylesheet" href="../../MDB5_STANDARD_UI_KIT_Pro/plugins/css/all.min.css" />
Code
<script type="text/javascript" src="../../MDB5_STANDARD_UI_KIT_Pro/js/mdb.min.js"></script>
<script type="text/javascript" src="../../MDB5_STANDARD_UI_KIT_Pro/plugins/js/all.min.js"></script>
There are some errors in the console that block code execution and therefore WYSIWYG is not initialized. - There are no errors.
Wysiwyg is added dynamically and requires manual init - How to do manual init. There is no description of the manual init in documentation.
Grzegorz Bujański staff commented 6 months ago
Try this code:
const wysiwygElement = document.querySelector('.wysiwyg');
const wysiwygInstance = WYSIWYG.getInstance(wysiwygElement);
if (!wysiwygInstance) {
new WYSIWYG(wysiwygElement);
}
KPHCRoman pro premium priority commented 6 months ago
Thank you very much!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: HP Z2
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No