Render images, sound and videos inside Editor

Render images, sound and videos inside Editor

fredcnfredcn Posts: 6Questions: 0Answers: 0
edited March 2014 in Editor
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.

Replies

  • allanallan Posts: 63,530Questions: 1Answers: 10,473 Site admin
    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
  • fredcnfredcn Posts: 6Questions: 0Answers: 0
    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.
  • fredcnfredcn Posts: 6Questions: 0Answers: 0
    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]
  • Nana111Nana111 Posts: 4Questions: 0Answers: 0
    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
  • allanallan Posts: 63,530Questions: 1Answers: 10,473 Site admin
    @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
  • fredcnfredcn Posts: 6Questions: 0Answers: 0
    edited March 2014
    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]
  • allanallan Posts: 63,530Questions: 1Answers: 10,473 Site admin
    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
  • fredcnfredcn Posts: 6Questions: 0Answers: 0
    It worked, thank you very much Allan, with minor changes I got it to work with sound and youtube links also.
  • allanallan Posts: 63,530Questions: 1Answers: 10,473 Site admin
    Fantastic - good to hear :-)

    Allan
  • martincollettmartincollett Posts: 1Questions: 0Answers: 0
    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'?
  • fredcnfredcn Posts: 6Questions: 0Answers: 0
    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]
This discussion has been closed.