EasyUI Forum
April 29, 2024, 09:28:01 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: texteditor contextMenu  (Read 1003 times)
andyj
Jr. Member
**
Posts: 57



View Profile
« on: February 27, 2023, 01:22:48 PM »

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
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: March 01, 2023, 12:12:58 AM »

This code works fine.
Code:
$('#te0').texteditor('getEditor').texteditor('execCommand','bold')
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #2 on: March 02, 2023, 08:42:50 AM »

Thanks Jarry

OOooops, forgot the #

Works fine.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!