Start Building Professional
Web Apps Today

dhtmlx editor inside a div - won't allow toolbar buttons to work

I am using dhtmlxEditor (rich text editor) in a website. Below is sample code. the editor is rendered inside one of two child divs, bundled inside a parent div. By default neither of the two child divs are visible. Two buttons control whether which (if any) of the child divs are visible.

if the div containing the Editor div is visible when the page renders, all the editor functionality works.
if the div containing the editor div is not visible when the page renders (set through javascript), none of the toolbar buttons work.


The page is structured something like thus:

<div name="parent" id="parent">
other markup here
<div name="child1" id="child1">
<p><label>Text: <div id="editorObj" style="width: 500px; height: 300px; border: #909090 1px solid;"></div></label></p>
</div>
<div name="child2" id="child2">
some markup here
</div>
</div>

<script type="text/javascript">
    var editor = new dhtmlXEditor("editorObj","standard");
    editor.setIconsPath("dhtmlxeditor/codebase/imgs/");
    editor.init();
    editor.setContent('some text');
</script>

<script type="text/javascript">
document.getElementById("child1").style.display='none';
document.getElementById("child2").style.display='none';
</script>

Is this a known issue? Is there a workaround?

Thanks in advance,
Michael

I found a workaround through business logic so that it the RTE always renders in a visible div.  However, I have a new issue:

Basically, initializing the RTE div correctly in a parent div that is visible, and then hiding that parent div and then making it visible again causes the the toolbar buttons to stop working.

In my case I have two buttons that hide or show the parent div.  The RTE div is always visible when the page renders and initializes correctly.  If the user hits the hide button then hits the show button, the RTE toolbar buttons stop working.

Can I do anything to fix this?

Thanks,
Michael

The issue wasn't reproduced locally. Please, see attached sample

Hi Alex,

I took the code sample you provided, and slightly modified it to work like my page (added a little javascript, a little extra markup), and am able to reproduce my issue. 

To reproduce the error, try this:  open the page, click the "composite" button, then click the "atomic" button, type some text in the RTE and try modifying using the toolbar buttons. 

Note that if you refresh the page and just type text into the RTE, the toolbar buttons do work. From this I conclude that it's only after hiding then un-hiding the RTE's parent Div that the problem occurs.

Thanks,
Michael