Related
I am trying to implement drag-n-drop feature in treepanel of ExtJS 4. Basically I want to drag some nodes from treepanel into an text box. I am pretty confused with the way drag-n-drop is implemented in ExtJS 4 but then also I have tried to write some code. I am not sure whether its correct or not.
My code is as follows :
CustomChart.js file contents
Ext.define('dd.view.CustomChart', {
extend : 'Ext.panel.Panel',
alias : 'widget.customChart',
layout : {
type : 'vbox',
align : 'stretch'
},
initComponent : function() {
this.items = [
{
xtype : 'textfield',
name : 'values',
fieldLabel : 'Drop values here'
}
];
this.callParent(arguments);
}
});
I am using this CustomChart panel inside AttritionViewer file as follows :
Ext.define('dd.view.AttritionViewer', {
extend : 'Ext.panel.Panel',
alias : 'widget.attritionViewer',
title : 'View attrition by dimensions',
layout : 'border',
initComponent : function() {
this.items = [
{
xtype : 'treepanel',
title : 'Select dimensions',
store : 'Dimensions',
rootVisible : false,
region : 'west',
height : '100%',
width : '20%',
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop',
ddGroup: 'GridExample'
}
}
},
{
xtype : 'panel',
region : 'center',
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : 'customChart',
flex : 1
}
]
}
];
this.callParent(arguments);
}
});
As you can see in code above, I have set ViewConfig and ddGroup for treepanel. Now I am not sure where to put following code so I have put it in init() method of controller. init() method of my controller looks as follows :
var customChartEl = Ext.widget('customChart');
var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', customChartEl, {
ddGroup: 'GridExample',
notifyEnter: function(ddSource, e, data) {
console.log('inside notifyEnter() method');
//Add some flare to invite drop.
/* formPanel.body.stopAnimation();
formPanel.body.highlight(); */
},
notifyDrop : function(ddSource, e, data){
console.log('inside notifyDrop() method');
return true;
}
});
After this code, I am getting this.el is null error at ext-debug.js (line 7859). I dont know what to do next.
Please guide me on how to drag an node from treepanel inside text field.
Thanks in advance !!!
check this link,
http://examples.extjs.eu/?ex=tree2divdrag
i am also trying one similar task. i can help you if i get some output.
if you solve your problem, just make a note here, that will help me too.
check the source of this sample too. http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html.
Best wishes.
I am trying to implement tinyMCE's BBCode plugin but not being able to make it work.
This is the init code:
$(textarea).tinymce({
script_url : '/js/tiny_mce/tiny_mce.js',
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,forecolor,|,undo,redo,link,unlink,|,removeformat,cleanup",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
entity_encoding : "raw",
remove_linebreaks : false,
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
convert_newlines_to_brs : true,
remove_redundant_brs : false,
width: '700px',
height: '250px'
});
The thing is that when I submit the form, HTML tags are being posted instead of BBCode. If I try tinyMCE.activeEditor.getContent() on the console, it brings BBCode.
I'm using an input[type=submit] to send the form (without any JS attached to it).
Why am I not getting BBCode posted?
Try passing the textarea content by a htmlentities function before sending it to the file that will handle the data!
does anyone know how to configure tinyMCE to utilize instead of the compact spaces? Storing the data in die db causes character encoding issues. We are currently utilizing tinyMCE to send emails and when these characters are sent they create a bunch of question marks, because the encoding we use in emailing cannot handle the compact spaces.
Any help would be greatly appreciated.
See below snippet for init code
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "spellchecker,style,layer,table,advhr,inlinepopups,insertdatetime,print,contextmenu,fullscreen,noneditable,visualchars,xhtmlxtras,wordcount,advlist,paste,tabfocus",
// Theme options
theme_advanced_buttons1 : "newdocument,spellchecker,|,print,|,styleselect,formatselect,fontselect,fontsizeselect,|,fullscreen",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,|,backcolor,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,insertdate,inserttime,|,code,|,showmorebuttons,",
theme_advanced_buttons3 : "tablecontrols,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,hr,removeformat,visualaid,|,charmap,advhr,",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
setup : function(ed) {
// Add a custom button
ed.addButton('showmorebuttons', {
title : 'Expand Advanced Toolbar',
image : '/img/email/toolbars.gif',
onclick : function() {
showMoreButtons(ed.id);
}
});
},
oninit : function(){
var tmpIdent = tinyMCE.activeEditor.id;
document.getElementById(tmpIdent + "_toolbar3").style.display = 'none';
var currentHeight = document.getElementById(tmpIdent+"_ifr").style.height;
currentHeight = currentHeight.substring(0, currentHeight.indexOf("px"));
currentHeight = (currentHeight*1)+15;
document.getElementById(tmpIdent+"_ifr").style.height=currentHeight+"px";
},
apply_source_formatting : false,
force_p_newlines : false,
remove_linebreaks : false,
forced_root_block : false,
force_br_newlines : true,
entity_encoding : "raw",
// Example content CSS (should be your site CSS)
content_css : "/tinymce/example/css/content.css",
relative_urls : false,
// Style formats
style_formats : [
{title : 'Word H1', block : 'h1', styles : {color : '#365f91', 'font-family' : 'cambria'}},
{title : 'Word H2', block : 'h2', styles : {color : '#4f81bd', 'font-family' : 'cambria'}},
{title : 'Word H3', block : 'h3', styles : {color : '#4f81bd', 'font-family' : 'cambria'}},
{title : 'Word H4', block : 'h4', styles : {color : '#4f81bd', 'font-family' : 'cambria', "font-style" : "italic"}}
]
});
Tinymce needs to insert protected spaces (U+00A0) because without them browsers would display only one single space (you may play around with the html in tinymce using the code plugin to see this behavior). This may lead to the problems you described. One solution to this could be to replace those protected spaces onSaveContent or before sending the content to the server. The second approach is to do the replace on server-side.
I have 2 editors inside my page. when i click a button i want them to become disabled.
If it is possible i would like it to become a regular textarea and to see the text inise of it as a regular text and not html.
I saw other questions for disabling but did not get them to work..
This is my code:
function create_text_editor()
{
$('#remarks1').tinymce(
{
script_url : 'resources/tinymce/jscripts/tiny_mce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "cut,copy,paste,|,bold,italic,underline,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|" ,
theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
plugins : "paste" ,
oninit : on_editor_init });
$('#remarks2').tinymce(
{
script_url : 'resources/tinymce/jscripts/tiny_mce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "cut,copy,paste,|,bold,italic,underline,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|" ,
theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
plugins : "paste" ,
oninit : on_editor_init });
}
'on_editor_init' is emtpy.
Any help will be appritiated,
Thank's In Advance.
You would need to call the save function and to shutdown tinymce. Of course you can execute this code when pushing a tinymce UI button (i guess you know how that works)
tinymce.get(editor_id).save();
tinymce.execCommand('mceRemoveControl', true, editor_id);
Now, you should be able to see the textarea that has been on the website before initializing tinymce.
when I had a look on http://demo.silverstripe.com/admin/ [user-name:admin ,password:admin]
I noticed that they have overridden the insert image button and also the insert flash buttonthey have replaced it with their own widget.
The Question is What is the easiest way achieve this or the best guide ?
note : I'm not using sliverstripe or any ready made CMS
Adding your own buttons is quite well described at the TinyMCE web: http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php
Pasted from site:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugins : 'inlinepopups',
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('Hello world!');
}
});
}
});
Just change this as you please.