PDA

View Full Version : ext.editor image insert button?



jfizer
17 Aug 2009, 11:59 AM
Cant help but notice that the HTML editor included with extjs lacks the rather basic functionality of being able to insert images. Am I simply missing something, or will I have to extend the class to add this feature? If the later, has anyone else done so with 3.0 that can share the process?

jtuchscherer
17 Aug 2009, 1:22 PM
I would be interested in this as well.

Thanks for your responses in advance.

jnicora
17 Aug 2009, 3:08 PM
I haven't though about how to add an insert image icon to the toolbar, but the command to insert an image would be this (fire after component initialization)



editor.execCmd("insertimage", url);


You can find the Midas spec here: http://www.mozilla.org/editor/midas-spec.html

jfizer
17 Aug 2009, 3:10 PM
Good to know, so I guess what we now need is the method to add a button to the tool bar with a custom command attached.

jnicora
17 Aug 2009, 3:35 PM
This is just super simple example to illustrate one way to do this. Something this example lacks is the actual XTemplate string used to make a toolbar button, you will want to replace my basic one with that.



Ext.onReady(function(){
var viewport = new Ext.Viewport({
items: [{
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false
}]
});
var editor = viewport.items.get(0);
var iconTpl = new Ext.XTemplate('<td class="x-toolbar-cell"><a class="x-htmleditor-custom-insertimage" href=""><img src="[path to icon]" />hello</a></td>');
var tb = Ext.select(".x-toolbar-left-row").elements[0];
Ext.DomHelper.append(tb, iconTpl.apply());
var insertIcon = Ext.get(Ext.select(".x-htmleditor-custom-insertimage").elements[0]).on("click", function(){
var prompt = Ext.Msg.prompt("Insert Image","Image URL",function(btn, txt){
if (btn == "ok") {
editor.relayCmd("insertimage", txt);
}
});
});
});

Lukman
18 Aug 2009, 3:15 AM
Or you can just skip those messy XTemplate thingy by using getToolbar() and directly add() the toolbar button into it via a 'render' event listener on the Ext.form.HtmlEditor itself:

listeners: {
render: function(editor) {
editor.getToolbar().add({
iconCls: 'x-icon-addimage',
handler: function(b,e) {
Ext.Msg.prompt('Insert Image', 'Image URL', function(btn, txt) {
if (btn == 'ok') {
editor.relayCmd('insertimage', txt);
}
});
}
});
}
}

jnicora
18 Aug 2009, 6:48 AM
I missed the getToolbar() method, yes that is definitely the way to go =)

VinylFox
18 Aug 2009, 7:52 AM
The reason there is no image button is because the HtmlEditor is strictly a client side implementation, and having an image insert button would require some server side code.

As for adding the button, take a look at the HtmlEditor Plugin set.
http://code.google.com/p/ext-ux-htmleditor-plugins/

jfizer
18 Aug 2009, 8:10 AM
Work well enough, but the icon isn't right and it would be nice to be able to position it somewhere other then at the end of the toolbar.

Lukman
18 Aug 2009, 8:12 AM
listeners: {
render: function(editor) {
editor.getToolbar().insertButton(5, {
iconCls: 'x-icon-addimage',
handler: function(b,e) {
Ext.Msg.prompt('Insert Image', 'Image URL', function(btn, txt) {
if (btn == 'ok') {
editor.relayCmd('insertimage', txt);
}
});
}
});
}
}

and change iconCls: 'x-icon-addimage' to match your CSS.

10 Jun 2016, 2:43 AM
Hi Lukman,I have tried your code and it's executed well but it can not load in the browser.While debugging in the browser it gives "Not allowed to load local resource: file:///G:/1.png" error.Do you have any idea how to fix it.