I want to dispense with the static texteditor toolbar and replace it with a context menu.
I have used the following code to create a context menu.
I have three texteditor fields on my page with ids: 'te0' 'te1' and 'te2'
The javascript code:
$(document).ready(function () {
$(document).bind('contextmenu',function(e){
var t = $(e.target).closest('.texteditor');
e.preventDefault();
$('#teMenu').menu('show', {
left: e.pageX,
top: e.pageY-20
});
});
The simplified menu:
<div id="teMenu" class="easyui-menu" style="border-top-width: 1px; top: 1px; width: 435px;">
<a href="#" onclick="$('te0').texteditor('getEditor').texteditor('execCommand','bold');" class="easyui-menubutton"
data-options="plain:true, hasDownArrow:false, iconCls:'icon-bold'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-italic'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-underline'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-removeformat'"></a>
|
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-insertorderedlist'"></a>
<a href="#" class="easyui-menubutton" data-options="plain:true, hasDownArrow:false, iconCls:'icon-insertunorderedlist'"></a>
</div>
One of the text editor divs:
<div id="te0" fit="true" class="easyui-texteditor" title="TextEditor" data-options="header:'none' "/div>
My question is:
How do I invoke the various commands (bold, italic etc.)?I tried including in the menu:
<a href="#" onclick="$('te0').texteditor('getEditor').texteditor('execCommand','bold');" class="easyui-menubutton"
data-options="plain:true, hasDownArrow:false, iconCls:'icon-bold'"></a>
But it doesn't work