Css – Enable (CSS) Stylesheet for only one div and it’s contents

csseditorjquery-pluginstwitter-bootstrapwysiwyg

I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.

So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.

I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.

Best Answer

One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.

Let say for example you give the WYSIWYG Div an ID of HTMLEditable.

you could target that div with your css and all the css within that div.

#HTMLEditable .WYSIWYG{
   ....css goes here
}

#HTMLEditable p{
   ....css goes here
}

The above css will only apply to that div. Then its just a case of finding the correct css that you need in that div.

Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.

Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).

EDIT: use LESS

To make this easier you can use LESS which is what bootstrap uses.

     #HTMLEditable {
      //import the modal css
       @import "bootstrap.css";
    }

you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above. The less will them compile the above into css and will scope everything in the css to #HTMLEditable

Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.