Print Page - texteditor contextMenu

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:

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:

Code:

<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>
&nbsp;|&nbsp;
<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:

Code:

<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:

Code:

<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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: andyj on February 27, 2023, 01:22:48 PM