catpaw
|
|
« on: February 05, 2017, 06:54:01 PM » |
|
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
|
|
« Last Edit: February 06, 2017, 03:14:58 PM by catpaw »
|
Logged
|
|
|
|
stworthy
|
|
« Reply #1 on: February 06, 2017, 12:34:39 AM » |
|
Here is the extended method 'buildRibbonBar' that will build the ribbon instead of the texteditor toolbar. <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: $(function(){ $('#te').texteditor({ toolbar: [] }); $('#te').texteditor('buildRibbonBar'); })
|
|
|
Logged
|
|
|
|
catpaw
|
|
« Reply #2 on: February 06, 2017, 01:34:10 PM » |
|
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: 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 <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?
|
|
« Last Edit: February 06, 2017, 01:37:15 PM by catpaw »
|
Logged
|
|
|
|
catpaw
|
|
« Reply #3 on: February 06, 2017, 03:06:04 PM » |
|
hey stworthy!!! I've use the execCommand method like { 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: { 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
|
|
« Last Edit: February 06, 2017, 03:15:32 PM by catpaw »
|
Logged
|
|
|
|
stworthy
|
|
« Reply #4 on: February 07, 2017, 12:27:28 AM » |
|
The 'forecolor' and 'backcolor' should be menubutton components, you need to set the 'type' property as 'menubutton'. { 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: $(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'); } } }); });
|
|
|
Logged
|
|
|
|
catpaw
|
|
« Reply #5 on: February 07, 2017, 07:51:34 AM » |
|
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
|
|
« Last Edit: February 07, 2017, 10:07:50 AM by catpaw »
|
Logged
|
|
|
|
|