dojox.editor.plugins.ShowBlockNodes¶
| Authors: | Jared Jurkiewicz |
|---|---|
| Project owner: | Jared Jurkiewicz |
| since: | V1.4 |
Have you ever wanted to see what the HTML layout being generated by the editor was? Not the source view, but just a nice ‘hint’ to how the document is being structured in HTML in terms of its block node layout. If so, then this plugin is for you!
Features¶
Once required in and enabled, this plugin provides the following features to dijit.Editor.
- Button with icon in toolbar for toggling the view of block nodes in the editor.
- Keyboard hotkey: CTRL-SHIFT-F9 for toggling the ShowBlockNodes on and off.
- Dynamic styling in the page to enable/disable the showing of the block nodes. It does not affect or alter any of the HTML within the actual editor body, making it safe to use.
Usage¶
Basic Usage¶
Usage of this plugin is quite simple and painless.
First include the CSS for it:
@import "dojox/editor/plugins/resources/css/ShowBlockNodes.css";
Then require it into the page where you’re using the editor:
dojo.require("dijit.Editor");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
Once it has been required in, all you have to do is include it in the list of extraPlugins (or the plugins property if you’re reorganizing the toolbar) for you want to load into the editor. For example:
<div data-dojo-type="dijit.Editor" id="editor" data-dojo-props="extraPlugins:['showblocknodes']"></div>
And that’s it. The editor instance you can reference by ‘dijit.byId(“editor”)’ is now enabled with the ShowBlockNodes plugin! You can use the button or hotkey to toggle the mode as you desire..
Examples¶
Basic Usage¶
dojo.require("dijit.form.Button");
dojo.require("dijit.Editor");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
@import "{{baseUrl}}dojox/editor/plugins/resources/css/ShowBlockNodes.css";
<b>Toggle the show block nodes button or use CTRL-SHIFT-F9, to show and hide block nodes in the page.</b>
<br>
<div data-dojo-type="dijit.Editor" height="250px" id="input" data-dojo-props="extraPlugins:['showblocknodes']">
<div>
<br>
blah blah & blah!
<br>
</div>
<br>
<table>
<tbody>
<tr>
<td style="border-style:solid; border-width: 2px; border-color: gray;">One cell</td>
<td style="border-style:solid; border-width: 2px; border-color: gray;">
Two cell
</td>
</tr>
</tbody>
</table>
<ul>
<li>item one</li>
<li>
item two
</li>
</ul>
</div>