ribbon + texteditor extensions combinated

[catpaw]

Hi all,

maybe is much to ask, but I working with ribbon extension and I want to take advantage of it, using it like editor since already has the text tools

but Im wondering how programing the icons to set the css on the box text.

So I look the text editor extension but, how can I declare it and keep using the icons of ribbon??

I cant up with this, please, give me some light

[stworthy]

Here is the extended method 'buildRibbonBar' that will build the ribbon instead of the texteditor toolbar.

Code:

<script type="text/javascript">
(function($){
$.extend($.fn.texteditor.methods, {
buildRibbonBar: function(jq, data){
return jq.each(function(){
var opts = $(this).texteditor('options');
data = data || [{
title: 'Paragraph',
toolbars: [
['bold','italic','strikethrough','underline'],
['justifyleft','justifycenter','justifyright','justifyfull'],
['insertorderedlist','insertunorderedlist','outdent','indent']
]
},{
title: 'Font',
toolbars: [
['formatblock','fontname'],
['fontsize'],
['forecolor','backcolor']
]
}];
var tb = $(this).texteditor('dialog').children('.dialog-toolbar');
tb.css({
margin:0,
padding:0
});
tb.html('<div title="Home"></div>');
tb.tabs({width:'100%',border:false});
tb.addClass('ribbon');
var p = tb.tabs('getTab',0);
for(var i=0; i<data.length; i++){
var group = data[i];
var g = $('<div class="ribbon-group"></div>').appendTo(p);
$.map(group.toolbars, function(toolbar){
var t = $('<div class="ribbon-toolbar" style="clear:both"></div>').appendTo(g);
$.map(toolbar, function(tool){
var cmd = opts.commands[tool];
if (cmd){
cmd.type = cmd.type || 'linkbutton';
cmd.plain = cmd.plain || true;
var btn = $('<a href="javascript:;"></a>').appendTo(t);
btn.attr('cmd', tool);
btn[cmd.type](cmd);
if (cmd.onInit){
cmd.onInit.call(btn[0]);
}
}
});
$('<div style="clear:both"></div>').appendTo(t);
});
$('<div class="ribbon-group-title"></div>').html(group.title).appendTo(g);
$('<div class="ribbon-group-sep"></div>').insertAfter(g);
}
$(this).texteditor('resize');
});
}
})
})(jQuery);
</script>

Usage example:

Code:

$(function(){
$('#te').texteditor({
toolbar: []
});
$('#te').texteditor('buildRibbonBar');
})

[catpaw]

hi stworthy thank you, its awsome the extended method

Im trying to integrated it to my current code

I have a ribbon with two tabs, the first has tools custom by me, where there are options that let me trigger a query to the data base

And the second tab there is the area the tools for the editor, my code:

Code:

var data = {
selected:0,
tabs:[{
title:'Selector',
groups:[
{
title:'first group',
tools:[ /*tools like comboboxes dependients*/ ]
},{
title:'second group',
tools:[ /*tools like linkbuttons*/ ]
},{
title:'third',
tools:[ /*tools like linkbuttons*/ ]
},{
title:'send',
tools:[ /*linkbutton to search in data base*/ ]
}]
},{
title:'Editor',
groups:[
{
title:'Portapapeles',
tools:[{
name:'paste',
text:'Pegar',
iconCls:'icon-paste-large',
iconAlign:'top',
size:'large'
},{
type:'toolbar',
dir:'v',
tools:[{
name:'cut',
text:'Cut',
iconCls:'icon-cut'
},{
name:'copy',
text:'Copy',
iconCls:'icon-copy'
}]
}]
},{
title:'Fuente',
tools:[{
type:'toolbar',
tools:[{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'Arial',selected:true},{text:'Century'},{text:'Tahoma'}],
width:116,
panelHeight:'auto',
editable:false
},{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'8'},{text:'12',selected:true},{text:'14'}],
width:50,
panelHeight:'auto',
editable:false
}]
},{
type:'toolbar',
style:{clear:'both',marginTop:'2px'},
tools:[{
name:'bold',
iconCls:'icon-bold',
toggle:true
},{
name:'italic',
iconCls:'icon-italic',
toggle:true
},{
name:'underline',
iconCls:'icon-underline',
toggle:true
},{
name:'strikethrough',
iconCls:'icon-strikethrough',
toggle:true
}]
},{
type:'toolbar',
style:{clear:'both'},
tools:[{
name:'forecolor',
iconCls:'icon-forecolor'
},{
name:'backcolor',
iconCls:'icon-backcolor'
}]
}]
},{
title:'Parrafo',
dir:'v',
tools:[{
type:'toolbar',
tools:[{
name:'justifyleft',
iconCls:'icon-align-left',
toggle:true,
group:'p1'
},{
name:'justifycenter',
iconCls:'icon-align-center',
toggle:true,
group:'p1'
},{
name:'justifyright',
iconCls:'icon-align-right',
toggle:true,
group:'p1'
},{
name:'justifyfull',
iconCls:'icon-align-justify',
toggle:true,
group:'p1'
}]
},{
type:'toolbar',
style:{marginTop:'2px'},
tools:[{
name:'insertunorderedlist',
iconCls:'icon-bullets'
},{
name:'insertorderedlist',
iconCls:'icon-numbers'
}]
},{
type:'toolbar',
style:{marginTop:'2px'},
tools:[{
name:'outdent',
iconCls:'icon-outdent'
},{
name:'indent',
iconCls:'icon-indent'
}]
}]
},{
title:'Anexos',
tools:[{
name:'imagen',
text:'Imagen',
iconCls:'icon-picture-large',
iconAlign:'top',
size:'large'
}]
}]
}]
};
$(function(){
$('#rr').ribbon({
data:data
});
$('#editor').texteditor({
toolbar: []
});
$('#dg').datagrid({
/*options for the datagrid*/
});
});

the html is

Code:

<div id="rr" style="width:100%"></div> <!--the ribbon -->
<div id="dg" style="width:99%; height:500px"></div> <!-- the datagrid where set the response of the query (tools of first tab) -->
<div id="editor" style="width:99%;height:500px;padding:20px"></div> <!--the editor box-->

so for the outcome I want, I should add all my first tab to the extended method 'buildRibbonBar' and I think that will be more dificult to handle than if I tell to my #editor that the text tools are on the second tab

What do you recommend me?

[catpaw]

hey stworthy!!!

I've use the execCommand method like

Code:

{
title:'Parrafo',
dir:'v',
tools:[{
type:'toolbar',
tools:[{
name:'justifyleft',
iconCls:'icon-align-left',
toggle:true,
group:'p1',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','justifyleft');
}
},{
name:'justifycenter',
iconCls:'icon-align-center',
toggle:true,
group:'p1',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','justifycenter');
}
},{
name:'justifyright',
iconCls:'icon-align-right',
toggle:true,
group:'p1',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','justifyright');
}
},{
name:'justifyfull',
iconCls:'icon-align-justify',
toggle:true,
group:'p1',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','justifyfull');
}
}]
}

 

Almost all icons works, I just dont know how make these buttons works:

Code:

{
type:'toolbar',
style:{clear:'both'},
tools:[{
name:'forecolor',
iconCls:'icon-forecolor',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','forecolor');
}
},{
name:'backcolor',
iconCls:'icon-backcolor',
onClick: function(){
$('#editor').texteditor('getEditor').texteditor('execCommand','backcolor');
}
}]
}

when I click the picker of font color or background color doesnt show anythink

how can make those works properly, please

[stworthy]

The 'forecolor' and 'backcolor' should be menubutton components, you need to set the 'type' property as 'menubutton'.

Code:

{
type:'menubutton',
name:'forecolor',
iconCls:'icon-forecolor'
}

When clicking on these two buttons, the drop-down color panel should display to allow the user to select the colors. Please look at the code below:

Code:

$(function(){
function buildColorPanel(mb){
var opts = $(mb).menubutton('options');
if (!opts.menu){
opts.menu = $('<div class="menu-content texteditor-color"></div>');
}
opts.menu.menu({
onShow: function(){
if ($(this).is(':empty')){
var colors = [
"0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255",
"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="texteditor-colorcell"></a>').appendTo(this);
a.css('backgroundColor', 'rgb('+colors[i]+')');
}
}
}
});
opts.menu.bind('click', function(e){
if ($(e.target).hasClass('texteditor-colorcell')){
var color = $(e.target).css('backgroundColor');
var cmd = opts.name + ' ' + color;
$('#editor').texteditor('getEditor').texteditor('execCommand',cmd);
opts.menu.menu('hide');
}
});
$(mb).menubutton({menu:opts.menu}); // attach the menu
}

$('#rr').ribbon({
data:data,
onClick: function(name,target){
if (name == 'forecolor' || name == 'backcolor'){
buildColorPanel($(target));
$(target).trigger('mouseenter');
}
}
});
});

[catpaw]

hi stworthy thank you it all done

the picker now is showed nice

the only thing is that when I highlight some text and I choose a color font, pink for example, the text not get the color, even in the demo page not work properly

I used the code you put me

thank you