Squiz Matrix Automatically Expand WYSIWYG Editor

Thu, Jul. 14, 2011

I have always hated how the Squiz Matrix WYSIWYG Editor does not expand by itself, so I added a click event to ours so that they will always expend when the page is opened.

The WYSIWYG editor uses an onclick event which is bound to a div. So, we first need to wrap the keywords that print editors, with another div. So, for example, if we have a news item Asset Builder, and we want both the summary and body editors to expand, we would do the following in the Create Layout Form:

<div id="editor1">%details-F_summary%</div>
<div id="editor2">%details-F_body%</div>

Wrapping our keywords in divs ensures that we can more specifically target the element we want to simulate the click on. Now, we add a little jQuery to our page to simulate a click inside each of our divs:

$(function () {
	$('#editor1 div, #editor2 div').trigger('click');

Now our WYSIWYG Editors expend when we load the page. Hooray!

Nicholas Hubbard


Paul Wojciechowski
Jul 18, 2011
Easy and cool. I used just JS to do the same, JQuery is so clear.

Add Comment