HTML tags in the editor fields

HTML tags in the editor fields

M1408M1408 Posts: 28Questions: 8Answers: 1
edited April 2017 in Free community support

I am using datatables and the editor to display a specific table from the datatable. One of the fields is a textarea and the the entry includes html tags such as <p> <br> etc...
The row details pop up displays eveyrthing fine but the editor popup is treating the tags like text and actually showing the <p>, <br> to the user. How do I fix that?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Sounds like you want to use a WYSIWYG editor. There are a number of them listed in the Editor field type plug-ins section.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    I have limited experience with WYSIWYG editor so I apologize if my follow up question is too basic. Wouldn't the WYSIWYG field still show the tags that are included in the database entry?
    The database has the html tags included in the entry that the textarea is displaying.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    The WYSIWYG Editor will render the HTML tags into the correct visual display. So for example <br> would show as a line break rather than as the tag.

    Likewise, the editor would also automatically insert tags that are required - for example highlighting text and clicking the bold icon will cause it to add the <b> tags. The text will be shown as bold, but the user won't see the tags.

    The example on the Quill home page is a a good example.

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1
    edited April 2017

    Thanks, Allan.
    I was able to implement Quill after I used your workaround here: http://dn.datatables.net/forums/discussion/41422/unable-to-load-quill to get it to work

    Two question though: the HTML Tags are still showing, and the toolbar is still showing even if I used toolbar: false

    tableEditor.add(
    {
    label: 'Notes:',
    name: 'Notes',
    data: Notes_Order,
    type: 'quill',
    toolbar: 'false',
    });

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Are you able to give me a link to the page in question so I can try to debug it please?

    toolbar: 'false',

    Try using this instead:

    opts: {
      modules: {
        toolbar: false
      }
    }
    

    Allan

  • M1408M1408 Posts: 28Questions: 8Answers: 1

    Thanks Allan,

    I just ended up using CKEditor instead and that worked. TinyMCE gave me a multitude of errors, but CKEditor worked great. I downloaded the custom package without the toolbar and the HTML tags aren't showing anymore

  • jtsjts Posts: 1Questions: 0Answers: 0

    Hello , does anyone have an example of using quill or any editor listed in plugins ?
    Having some trouble actually updating currently with quill. Nothing is saved to DB.
    most likely need to configure something more.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    For the client side the plugin page describes what is needed:
    https://editor.datatables.net/plug-ins/field-type/editor.quill

    Just make sure that you are loading //cdn.quilljs.com/latest/quill.min.js along with the editor.quill.js and of course their associated CSS.

    If other fields are saved to the DB then likely the problem is something on your server side. I would start by using the browser's developer tools to see if the quill field is sent to the server, check the browser's console for errors then start looking for errors in the server logs.

    Can you provide a link to your page or a test case replicating the issue?

    Kevin

This discussion has been closed.