Wysiwyg for editor

Wysiwyg for editor

fdeciccofdecicco Posts: 8Questions: 1Answers: 0
edited September 2013 in Editor
is there a way to integrate a wysiwyg editor in Editor?
say ckeditor or TinyMCE.

Replies

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    edited September 2013
    A CKEditor plug-in is available here: http://editor.datatables.net/fields/plugins

    I note that your trial expired back in July. Did you find Editor useful?

    Allan
  • fdeciccofdecicco Posts: 8Questions: 1Answers: 0
    well, since i asked the question TinyMCE won as my wysiwyg of choice. its just easier to configure.

    regarding editor, yes, its most useful. I gota get it. it seems that whenever i need it i dont have the time to use it due to deadlines. I have a hard deadline now that editor would save me but probably again i wont get to use it due to this wysiwyg thing that i need badly and TinyMCE does very easily and i havent been able to figure it out with ckeditor. there is always something.

    can you let me know if there is a plan for a tinyMce plugin. Thank you.
  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    I've just certainly a suitable plug-in, which is now available on the Editor plug-ins page here: http://editor.datatables.net/fields/plugins#tinymce

    Regards,
    Allan
  • fdeciccofdecicco Posts: 8Questions: 1Answers: 0
    WOW Allan, this is great support. Thank you.

    I have just spent a few hours going over the docs and samples of datatables and editor in particular and have a question for which I could not find a clear answer or simple and complete example:

    how can I add a button/link to every row in a table to perform an action other than the CRUD that editor will do for me. Lets say I just wanted to lookup a related table and popup a modal with the results or update a relate record for a given row, etc. It seems that although this use case is pretty typical of most application, there is no simple way to accomplish this in either editor nor datatables or at least its not clearly documented. Is there such example in the licensed version of the tool set?

    Also, is it possible to place the EDIT ADD DELETE action buttons at the beginning or end of each row instead of on top of the table? currently it seems that you first have to select the row that you want to act on and then scroll to the top and click the desired action button. having the buttons on every row lets users complete the operation in a single click instead of a clicking, mouse over to scroll bars, scrolling to top, mouse over to right, and finally clicking. this is serious for usability.

    I look forward to your reply.

    Frank.
  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    > how can I add a button/link to every row in a table to perform an action other than the CRUD that editor will do for me.

    Use mRender or sDefaultContent to put your content in the table (or if its in the data source, use it from there) and then just attach a jQuery event to it. This example shows the concept using Editor: http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html . It uses the Editor API, but standard plain old jQuery for adding the events.

    > Also, is it possible to place the EDIT ADD DELETE action buttons at the beginning or end of each row instead of on top of the table?

    See the above link for how to do that as well :-)

    Allan
  • fdeciccofdecicco Posts: 8Questions: 1Answers: 0
    Allan,

    I have purchased editor but I am very pressed for time and desperate for a quick solution to how to add a button to a simple table. Would you be able to help me with this, I can pay for your time without problems.

    Below is the code that works perfectly but I cannot figure out how to make the last two columns which both contain the id of the records that I would like to turn into a simple links/btn to my own pages. I don't really need/want the editor as I like the cleanness of it plus, again, i am very pressed for time. Can you update this code with the logic to accomplish the above for me.

    I hope you have time to help. Thank you.

    <!DOCTYPE html>



    DataTables example








    //php: $aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade', 'id', 'id' );

    $(document).ready(function() {
    $('#mytable').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "dt_edit1_ss.php",
    "iDisplayLength": 25
    } );
    } );




    My DataTablw



    Rendering engine
    Browser
    Platform(s)
    Engine version
    CSS grade
    id1
    id2
  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    > I cannot figure out how to make the last two columns which both contain the id of the records that I would like to turn into a simple links/btn to my own pages

    [code]
    aoColumnDefs: [
    {
    aTargets: [ -2 ],
    mRender: function ( data, type, row ) {
    return type === 'display' ?
    '
  • fdeciccofdecicco Posts: 8Questions: 1Answers: 0
    I am very sorry but it does not work, I think its missing some kid of delimiter, quote, bracket, or something. below is what I came up with from your snippet which i obviously had to update. I'm sure I screwed up. maybe its in the return, i just dont know.
    its very frustrating and its killing me on time. I think I will have to go back to my old tool kit, i gave it a good shot. Thank you for your patience.


    $(document).ready(function() {
    $('#mytable').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "dt_edit1_ss.php",
    "iDisplayLength": 25,
    "aoColumnDefs": [
    {
    "aTargets": [ -2 ],
    "mRender": function ( data, type, row ) {
    return type === 'display' ?
    '
  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    edited September 2013
    Yup, couple of trivial syntax errors - sorry. Resolved here: http://live.datatables.net/asifiq/edit#javascript,html

    [code]
    $(document).ready(function () {
    $('#mytable').dataTable({
    //"bServerSide": true,
    //"sAjaxSource": "dt_edit1_ss.php",
    "iDisplayLength": 25,
    "aoColumnDefs": [{
    "aTargets": [-2],
    "mRender": function (data, type, row) {
    return type === 'display' ?
    'Link 1' :
    data;
    }
    }, {
    "aTargets": [-1],
    "mRender": function (data, type, row) {
    return type === 'display' ?
    'Link 2' :
    data;
    }
    }]
    });
    });
    [/code]

    (I commented out your ajax options for the live example)

    Allan
  • fdeciccofdecicco Posts: 8Questions: 1Answers: 0
    Allan,

    works great.

    Thank you.
This discussion has been closed.