Render images, sound and videos inside Editor

fredcn

Hi all,

After a few hours trying to make editor show images, I finally got it when I read this post: http://datatables.net/forums/discussion/15691/render-html-data-in-the-editor/p1

My idea is having an url link for an image(and in the future, sound and youtube), and when I ad it to my database I get a preview thumbnail in the editor window.

My programming skills are very limited, so if someone could help me tweak the code in the discussion above to enable my idea, that would be great.

The idea is to add the code "" to the fieldtyper.display funcion.

And, as i said before, create a similar type for youtube and mp3, I would guess using the embeb link to a div container.

I noted that if I have 2 items in the editor window with the same DB variable, the image wont show, ie text field with the editable url and the display field showing the image.

allan

So what you are looking for is a text input (where you will enter the image url) and for it to show a preview of the image?

Try this (set your field type to `text-img` :

[code]
$.fn.dataTable.Editor.fieldTypes['text-img'] = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
"create": function ( conf ) {
conf._wrapper = $('');
conf._input = $('').attr( $.extend( {
id: conf.id,
type: 'text'
}, conf.attr || {} ) );

conf._wrapper.prepend( conf._input );

return conf._input[0];
}

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );
conf._wrapper
.find( 'div.img-display' )
.html( '' );
},

"enable": function ( conf ) {
conf._input.prop( 'disabled', false );
},

"disable": function ( conf ) {
conf._input.prop( 'disabled', true );
}
} );
[/code]

I must confess I haven't actually tried running the code yet, so there might be some small daft error, but I think the basic idea should work!

Basically it created the HTML structure:

[code]




[/code]

then, whenever the 'set' function is triggered, an image tag is inserted into the container. You could then use CSS to customise the styling as needed.

An extension to this would be to add a `keyup` event handler to the input, to dynamically modify the image source as you type in an address (since at the moment it will only show the image of the value when the form is initialised or set by the API).

Allan

fredcn

Hi Allan,

It wasn't working, so I changed a few things:

[code]

$.fn.dataTable.Editor.fieldTypes.textimg = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
"create": function ( conf ) {
conf._wrapper = $('');
conf._input = $('').attr( $.extend( {
id: conf.id,
type: 'text'
}, conf.attr || {} ) );

conf._wrapper.prepend( conf._input );

return conf._input[0];
},

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );
conf._wrapper.find( 'div.img-display' );
conf._wrapper.html( '' );
},

"enable": function ( conf ) {
conf._input.prop( 'disabled', false );
},

"disable": function ( conf ) {
conf._input.prop( 'disabled', true );
}
} );

[/code]

It works but show only a text box with the url stored in the DB, no image.

fredcn

No luck so far, I've been messing around a bit with this code and the code from the other discussion for showing HTML, and this is the best I got.
If I use return conf._div[0]; it show the image, and return conf._input[0]; it shows the input box, I cant make it to show the 2.

[code]
$.fn.dataTable.Editor.fieldTypes.display = {
"create": function ( conf ) {
conf._div = $('').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );

conf._input = $('').attr( $.extend( {
id: conf.id,
type: 'text'
}, conf.attr || {} ) );

conf._div.prepend( conf._input );

return conf._div[0];
},

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );

conf._div.html( ''+val );
},

"enable": function ( conf ) {},

"disable": function ( conf ) {}
};
[/code]

Nana111

Hi there
The code seems a little bit difficult for me.So i just tried an image editor which supports to do that directly:
http://www.rasteredge.com/how-to/csharp-imaging/
But it can not work.Is there any other recommendation?
Thanks a lot

allan

@Nana111 - Can you open a new thread with your question please, as it doesn't directly relate to this discussion.

@fredcn - Sorry I missed your reply a few days ago. This forum does move quickly these days!

Try this in your `set` function:

[code]
"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );

conf._div
.remove('img')
.append( ''+val );
},
[/code]

Before it was overwriting the `` element due to the use of the `html()` method.

Allan

fredcn

It is working! It show the input box, the image, and the update also works.

Just one small problem, the second time I press edit, it show the image in duplicate, this is resolved if I press F5.

[code]
$.fn.dataTable.Editor.fieldTypes.display = {
"create": function ( conf ) {
conf._div = $('').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );

conf._input = $('').attr( $.extend( {
id: conf.id,
type: 'text'
}, conf.attr || {} ) );

conf._div.prepend( conf._input );

return conf._div[0];
},

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );

conf._div
.remove( 'img')
.append( ''+val );
},

"enable": function ( conf ) {},

"disable": function ( conf ) {}
};
[/code]

allan

Try:

[code]
$.fn.dataTable.Editor.fieldTypes.display = {
"create": function ( conf ) {
conf._div = $('').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );

conf._input = $('').attr( $.extend( {
id: conf.id,
type: 'text'
}, conf.attr || {} ) );

conf._div.prepend( conf._input );

return conf._div[0];
},

"get": function ( conf ) {
return conf._input.val();
},

"set": function ( conf, val ) {
conf._input.val( val ).trigger( 'change' );

$('img', conf._div).remove();
conf._div.append( ''+val );
},

"enable": function ( conf ) {},

"disable": function ( conf ) {}
};
[/code]

Allan

fredcn

It worked, thank you very much Allan, with minor changes I got it to work with sound and youtube links also.

allan

Fantastic - good to hear :-)

Allan

martincollett

Sorry to be dim - to use the code above, do I need to set the field type for the image url to a new custom type 'display'?

fredcn

Yes, in the editor plugin function, for example:


[code]
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers.php",
"domTable": "#example",
"fields": [ {
"label": "Question:",
"name": "question"
}, {
"label": "Answer:",
"name": "answer"
}, {
"label": "Tags:",
"name": "tags"
}, {
"label": "Difficulty:",
"name": "dif",
"type": "select",
"ipOpts": [
{ "label": "1", "value": "1" },
{ "label": "2", "value": "2" },
{ "label": "3", "value": "3" },
{ "label": "4", "value": "4" },
{ "label": "5", "value": "5" }
]
}, {
"label": "Image:",
"name": "urlimage",
"type": "display"
}, {
"label": "URL Video:",
"name": "urlvideo",
"type": "displayvideo"
}, {
"label": "URL Sound:",
"name": "urlsound",
"type": "displayaudio"
}
]
} );
[/code]