Tutorial: Modify the wysiwyg-editor plugin

Question

Today I've just modified the default wysiwyg-editor in my QA website, and I share you my solution to add a CSS class to your text (in your question) by (adding and) using an extra "Styles" button in your wysiwyg-editor

This is what I've created:

And how I do:

Step 1: Change the file: \qa-plugin\wysiwyg-editor\qa-wysiwyg-editor.php

in the lines:

$qa_content['script_lines'][]=array(
                    "qa_wysiwyg_editor_config={toolbar:[".
                        "['Bold','Italic','Underline','Strike'],".
                        "['Font','FontSize'],".

to add more buttons.

In this case, I added the "Styles" button by adding:

"['Styles','Link','Unlink'],".

Step 2: change the file qa-plugin\wysiwyg-editor\plugins\styles\styles\default.js

Clear what you don't want to have, and add something like that:

CKEDITOR.stylesSet.add('default',[{
    name:'Big Green Button',
    element:'div',
    attributes:{
        class: 'big-green-button'
    }
},

and when you select your text and then select the Styles > Big Green Button, the wysiwyg-editor will wrap the text with <div class="big-green-button">

Step 3 (final): edit qa-styles.css in your theme to update your change (in this example, we need to add .big-green-button style)

Comments

This is nice. That would be great help if you can make a small video for that.

---

Thanks for the cool tip. One question - If you choose multiple lines in the editor and apply a style ( say a div ), then the style gets applied to every line, instead of surrounding all selected lines and putting them in a div. Also it overrides the style of the individual line. Any workaround ?

Answer 1

Hi,

 Can you provide us with a link to your website so that we can see this in action?