[2.x] Ext.ux.plugins.HtmlEditorImageInsert

[george.antoniadis]

Ext.ux.plugins.HtmlEditorImageInsert v.0.1

This is a very first draft of a plugin I needed for the HtmlEditor.
Allows the user to add images in the editor by specifying their URL.

Example:
http://noodles.gr/resources/javascript/extjs/2.0-rc1-lab/Ext.ux.plugins.HtmlEditorImageInsert.html

Usage:

<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

new Ext.FormPanel({
renderTo: 'form',
defaultType: 'textfield',
items: [{
xtype:'htmleditor',
fieldLabel:'some label',
width: 650,
height: 350,
plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
popTitle: 'Image url?',
popMsg: 'Please insert an image URL...',
popWidth: 400,
popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
})
}
]
});
});
</script>


Ext.ux.plugins.HtmlEditorImageInsert.js:

Ext.namespace('Ext.ux', 'Ext.ux.plugins');

Ext.ux.plugins.HtmlEditorImageInsert = function(config) {

config = config || {};

Ext.apply(this, config);

this.init = function(htmlEditor) {
this.editor = htmlEditor;
this.editor.on('render', onRender, this);
};

this.imageInsertConfig = {
popTitle: config.popTitle || 'Image URL',
popMsg: config.popMsg || 'Please select the URL of the image you want to insert:',
popWidth: config.popWidth || 350,
popValue: config.popValue || ''
}

this.imageInsert = function(){
Ext.MessageBox.show({
title: this.imageInsertConfig.popTitle,
msg: this.imageInsertConfig.popMsg,
width: this.imageInsertConfig.popWidth,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
value: this.imageInsertConfig.popValue,
scope: this,
fn: function(btn, text){ if ( btn == 'ok' ) this.editor.relayCmd('insertimage', text); }
});
}

function onRender() {
if (!Ext.isSafari) {
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle: false,
scope: this,
handler:function(){ this.imageInsert(); },
clickEvent:'mousedown',
tabIndex:-1
});
}
}

}


All plugin params are optional and for now are only used for the prompt message box.
This is very basic but should work ok...

I'm trying to make this play nice with something like JSakalos' fileTree thingie...
If anyone has any suggestions on the structure of the plugin please let me know cause it's my first attempt at one and I ain't sure it's the right way to go...

based on cmendez21's post (http://extjs.com/forum/showthread.php?t=15104)...

[tidal]

Hi!

This is very basic but should work ok...

Thx a lot, this very cool :D

Basics teach everybody a lot more then featuritis ;)

So don

[zican]

I change the source a little
insert image at the current cursor position
when MessageBox shown, focus in Editor losted
IE & FF OK
please fix my poor english skill, sorry all

this.imageInsert = function(){
var range;
if(Ext.isIE) range = this.editor.doc.selection.createRange();
Ext.MessageBox.show({
title: this.imageInsertConfig.popTitle,
msg: this.imageInsertConfig.popMsg,
width: this.imageInsertConfig.popWidth,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
value: this.imageInsertConfig.popValue,
scope: this,
fn: function(btn, text) {
if ( btn == 'ok' ) {
if(Ext.isIE) range.select();
this.editor.relayCmd('insertimage', text);
}
}
});
}

[marcing]

Is there any way to put the image button before the source edit button?

I noticed that You htmleditor generates valid xhtml (<span style="">), while mine generates "<font face="times new roman">", any ideas why could it be?

EDIT: I know the solution for the font/span issue - the problem was the "black theme", others work well.

[apaa]

Maybe add the tooltip to the button make sense,so I add some code like this:

function onRender() {
if (!Ext.isSafari) {
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle: false,
scope: this,
handler:function(){ this.imageInsert(); },
clickEvent:'mousedown',
tooltip : config.buttonTip || {
title: 'Insert Image',
text: 'Insert Image to htmlEditor',
cls: 'x-html-editor-tip'
}
tabIndex:-1
});
}
}

[fgerneth]

Looks quite good for me & i like the idea of the imageselect adapter. Just one thing which would be helpfull, is to be able to set some css-properties of the window (like the textflow) so that you can really include pictures into your text without having these breaks in your text. Anyway good work :)

[george.antoniadis]

I'm trying to figure out a way to add a plugin for the plugin :P
I've finished a crude and hard-coded file manager instead of the "type-a-url" aproach but needs to be stripped down a bit and made into an actuall plugin.

Image properties is a must for me too... but still need the plugin-in-plugin way figured >_<

[apaa]

desired to see it....

[fangzhouxing]

This plugin is very useful, but I encountered a problem:
My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window.
How can I bringit to Front?
I have used WindowMgr.bringToFront method, but not succeed!
Can anyone help me ? Thanks in advance.

[george.antoniadis]

I've got the same exact problem when I click the button and try to load another window... :/

I've tried everything from css z-index, window manager visibility and stuff... no luck...

[cmendez21]

Wow it looks so cool B)
its nice to see somebody has used or based the code i posted long ago for something new..!

Even my code wasn't the great deal but its so cool to see something new about this subject :D

When i started with ext i didn't know how to use all the components very well
but i may suggest a list of things that would be nice taking advantage of the window?


Href tag (with target)
Alt tag
Border tag


Well i could mention a lot more but the idea its to make it simple and functional

Keep the good work..!

[fangzhouxing]

My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window

Anyone?

[Thomas_K]

Just set z-index:9000; in the class and its fixed.

[mschering]

i had the same problem. I didn't use the standard prompt because I'm building a more complex image insert window. I solved it by putting a 200 ms defer on the show function.

this.imageInsertWindow.show.defer(200, this.imageInsertWindow);

Good luck!

[fangzhouxing]

Thanks for reply! I have solved the problem by mschering's solution as follows:


this.imageInsert = function() {
var range;
if (Ext.isIE)
range = this.editor.doc.selection.createRange();
var msg = Ext.MessageBox.show( {
title : this.imageInsertConfig.popTitle,
msg : this.imageInsertConfig.popMsg,
width : this.imageInsertConfig.popWidth,
buttons : Ext.MessageBox.OKCANCEL,
prompt : true,
value : this.imageInsertConfig.popValue,
scope : this,
fn : function(btn, text) {
if (btn == 'ok') {
if (Ext.isIE)
range.select();
this.editor.relayCmd('insertimage', text);
}
}
});
var win = msg.getDialog()
win.show.defer(200, win)
}

[Frank]

nice plugins to me:)

[dddu88]

Can we use this to insert an image file from my local machine file system?

Thanks

Dave

[george.antoniadis]

you'd have to combine it together with another UX like saki's filetree.

[Yuri]

This plugin is very useful, but I encountered a problem:
My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window.
How can I bringit to Front?
I have used WindowMgr.bringToFront method, but not succeed!
Can anyone help me ? Thanks in advance.

I think the only safe solution is to manipulate zseed parameter of the popup window. You set it once for your window group and the problem is solved for all popups & messageboxes.

[sunjoo]

Hi

I have the same problem, any clue yet ? The code is here http://extjs.com/forum/showthread.php?t=37211

[Fabyo]

is this plugin for extjs 3.0?

[mschering]

Should also work in 3.0.

[Fabyo]

but does not work, the error :

Error calling method on NPObject!
var swfobject=function(){var E="undefine...}});Ext.grid.GroupingView.GROUP_ID=1000;ext-all.js (linha 11)

this.id.indexOf is not a function
Ext.DomHelper=function(){var s=null,j=/^...b.stopEvent();this.completeEdit()}}}});\n