Topic: Wysiwyg editor issues setting up and configuring / using it

SimonAntony priority asked 4 months ago


Really confused how to do basic things with this toolkit, the example docs should allow full example code (including css/js) to be implemented easily and work as expected, this is not the case.

I've bought a licence for the pro kit and downloaded MDB5-STANDARD-UI-KIT-Pro-Advanced-4.3.0

I am using Bootstrap Studio (but to be honest that is irrelevant to my query) and i'm trying to add a Wysiwyg editor to my page and then configure it to be useful - this is where it gets stuck or lost in translation.

I have the following files loaded:

wysiwyg.min.css in the header wysiwyg.min.js in the footer after jquery is loaded - I don't actually need jquery on the site but it's only for this plugin.

I have the following html in the page:

<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" data-mdb-wysiwyg-styles-section="false">
              <br/>
              <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid"></p>
              <h1 style="text-align: center;">MDBootstrap</h1>
              <p style="text-align: center;">WYSIWYG Editor</p>
              <p style="text-align: center;"><a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a>&nbsp;© 2020</p>
              <p style="text-align: left;"><b>Features:</b></p>
              <ul>
                <li>Changing block type</li>
                <li>Text formatting (bold, italic, strikethrough, underline)</li>
                <li>Setting text color</li>
                <li>Setting color highlight</li>
                <li>Text aligning</li>
                <li>Creating a list (bulled or numbered)</li>
                <li>Increase/Decrease indent</li>
                <li>Inserting links</li>
                <li>Inserting pictures</li>
                <li>Insert horizontal line</li>
                <li>show HTML code</li>
                <li>Undo/Redo</li>
              </ul>
              <p><b>Options:</b></p>
              <ul>
                <li>Translations</li>
                <li>Using your own color palette</li>
                <li>Disabling/enabling sections</li>
              </ul>
              <p><b>Methods:</b></p>
              <ul>
                <li>Get HTML code from editor</li>
              </ul>
            </div>
          </div>

This is how it looks: https://www.evernote.com/l/ADeD4olmEw9P-4P0dVmrc3viFSLvZoLXz4kB/image.png

The issue is I can display the editor which does load the toolbar, however the following issues now persist:

  1. I cant find anything in the documentation to show me how the toolbars work - when I click on justify right text, nothing happens. The DOM is not modified (i.e. i'd expect a class to be added to the highlighted line in the editor for instance).
  2. How can I modify the list of styles - in fact how do I just add to the list, there is nothing there atm
  3. I can turn off some elements such as the styles dropdown, however I want full control over which icons show/hide i.e. I don't want the image upload option but do want the text formatting options (apart from strikethrough etc) - how do I do this?

I'd expect much better documentation for a paid product along with examples however there seems to be a lot of over complex routes to getting the kit even running, let alone using it in real world examples.

Simon


kpienkowska staff answered 3 months ago


ad.1 when you select some text f.e 2 lines then use justify left this fragment will get inline style added which you can check in developer tools.

ad.2 you can choose all available styles from a basic example - this plugin is not substituting for Microsoft Word - it's a simple text editor to be used on the page.

ad.3 you can choose sections to show. If you want to hide a specific button you have to do this via custom JS.


SimonAntony priority commented 3 months ago

Re 3. Any examples, where in the documentation is this explained please?

Managed to get the toolbars working by adding the main mdb.min.js file (was not clear this was required).



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: MBP
  • Browser: Chrome and Safari
  • OS: MAC OS
  • Provided sample code: No
  • Provided link: Yes