EasyUI Forum
May 07, 2024, 02:37:24 PM *
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: color  (Read 6027 times)
proceno72
Newbie
*
Posts: 39



View Profile
« on: December 20, 2016, 07:42:48 AM »

First of all, thanks for the new TextEditor extension. It was essential for my projects.
Is there a way to activate a text-color toolbar button too? Or maybe it will be on next release?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: December 21, 2016, 12:39:07 AM »

The 'forecolor' tool can be extended as:
Code:
<script type="text/javascript">
(function($){
$.extend($.fn.texteditor.defaults.commands, {
'forecolor': {
type: 'menubutton',
iconCls: 'icon-forecolor',
menu: $('<div class="menu-content" style="box-sizing:border-box;width:156px;height:120px"></div>'),
duration: 99999999,
width: 26,
onClick: function(){
var target = this
var menu = $(target).menubutton('options').menu;

if (menu.is(':empty')){
menu.append(
'<style>' +
'.te-color{box-sizing:border-box;display:block;width:18px;height:18px;float:left;cursor:pointer;border:1px solid #fff}' +
'.te-color:hover{border:1px solid #000}' +
'</style>'
);
var colors = [
"244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220",
"234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189",
"224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160",
"204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121",
"153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71",
"102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48"
];
for(var i=0; i<colors.length; i++){
var a = $('<a class="te-color"></a>').appendTo(menu);
a.css('backgroundColor', 'rgb('+colors[i]+')');
}
menu.bind('click', function(e){
if ($(e.target).hasClass('te-color')){
var color = $(e.target).css('backgroundColor');
menu.menu('hide');
$(target).texteditor('getEditor').texteditor('execCommand','foreColor '+color);
}
});
}
}
}
});
$.fn.texteditor.defaults.toolbar.push('forecolor')
})(jQuery);
</script>
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #2 on: December 21, 2016, 05:20:33 AM »

It works perfect, any chance to add that to next extension version, please?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: December 21, 2016, 07:44:49 PM »

The 'forecolor' and 'backcolor' tools have been added, please download it from http://www.jeasyui.com/extension/texteditor.php
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #4 on: December 22, 2016, 12:15:46 AM »

Thank you so much.
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!