WYSIWYG Editor

Topic: WYSIWYG Editor

KPHCRoman priority asked 6 months ago

**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

Submit all your answers
//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

Add comment

Grzegorz Bujański staff answered 6 months ago

0 0 Best answer

Please insert min. 20 characters.

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 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.

<p>You are importing wysiwyg incorrectly on your page - Code is correct (as you mentioned.) Import:</p>

<p>There are some errors in the console that block code execution and therefore WYSIWYG is not initialized. - <strong>There are no errors.</strong></p>

<p>Wysiwyg is added dynamically and requires manual init - <strong>How to do manual init. There is no description of the manual init in documentation.</strong></p>

Please insert min. 15 characters.

Grzegorz Bujański staff commented 5 months ago

Try this code:

const wysiwygElement = document.querySelector('.wysiwyg');
const wysiwygInstance = WYSIWYG.getInstance(wysiwygElement); 
if (!wysiwygInstance) { 
  new WYSIWYG(wysiwygElement);
}

KPHCRoman priority commented 5 months ago

Thank you very much!

Add comment

KPHCRoman priority answered 6 months ago

0 0 Best answer

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.

Add comment

KPHCRoman priority answered 6 months ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Grzegorz Bujański staff answered 6 months ago

0 0 Best answer