CODEWITHSUNDEEP
javascriptdojo
johnITBonuc
johnITBonuc

Reputation: 161

Css in dojo editor

I have a question, could you help me:D I used dijit.editor in dojo. When i input img tag like : 

<img src="abc.jpg" alt="" class="alignleft" />

into the editor,

So i want to style css for class .alignleft in editor, how can i do it, because I can't style html code in the editor. Outside Editor everything is ok.

Thanks for any suggestion:D

Upvotes: 1

Views: 1054

Answers (3)

leo
leo

Reputation: 31

Another alternative is to define stylesheets direclty in the editor's parameters. The semicolon ";" is used as a separator.

var editor = new dijit.Editor({
    styleSheets: 'linkToStylesheet1;linkToStylesheet2;etc.'
});

Upvotes: 3

Chris
Chris

Reputation: 7298

You can also specify a stylesheet to be used by the editor, thus avoiding having to rewrite any css. Specifying the same stylesheet you're using for your parent page would solve your problem. When I instantiate this programmatically, it looks like this:

var editor = new dijit.Editor({
    /* snipping my many parameters... */
});

editor.addStyleSheet('style.css');

Upvotes: 0

phusick
phusick

Reputation: 7352

The dijit.Editor runs inside iframe, which is the reason your parent document styles are not working. You have to inject styles into editor's iframe. The most straightforward way I can come with is to put styles' definition inside dijit.Editor tag:

<div data-dojo-type="dijit.Editor">
    <style type="text/css">
        .blue {color: blue;}
    </style>
    <p class="blue">blue</p>
</div>

Some code to explain the difference:

<head>
    <style type="text/css">
        .green {color: green;}
    </style>
</head>
<body class="claro">
    <div data-dojo-type="dijit.Editor">
        <style type="text/css">
            .blue {color: blue;}
        </style>
        <p class="green">green is NOT green</p>
        <p class="blue" >blue is blue</p>
    </div>
<body>

Upvotes: 1

Related Questions