Search code examples
jquerydatatablesckeditorrich-text-editorrichtext

display rich text in DataTable

I want to display rich text in DataTable. The text is generated using CKEditor. My DataTable is getting rendered using jQuery:

var myTable = $("#_table").DataTable(this.properties);

I referred the official forum :Editor: Display Rich Text in Datatable, the solution that was provided there was something in the lines of:

This is probably caused by the XSS protection that is built into the Editor server-side libraries. If you are happy to allow scripting, you can disable that option.

But I do not know how to disable that property. I tried various methods but none worked.

Edit 1: A snapshot of what the datatable displays now: enter image description here

Edit 2: In the datatable, text is displayed in string format: "<p><h1>abc</h1></p>" instead of <p><h1>abc</h1></p>.

Solution

  • I was able to figure out why the datatable won't display data in rtf. Actully, CKEditor generates texts in two different formats:

    1. &lt;p&gt;&lt;s&gt;&lt;u&gt;&lt;em&gt;&lt;strong&gt;This is a custom defined task. Now there are further details:&lt;\/strong&gt;&lt;\/em&gt;&lt;\/u&gt;&lt;\/s&gt;&lt;\/p&gt;\n\n&lt;ul&gt;\n\t&lt;li&gt;&lt;span style=\"color:#00ff00\"&gt;&lt;s&gt;&lt;u&gt;&lt;em&gt;&lt;strong&gt;&lt;span style=\"background-color:#ff0000\"&gt;List this is the first&lt;\/span&gt;&lt;\/strong&gt;&lt;\/em&gt;&lt;\/u&gt;&lt;\/s&gt;&lt;\/span&gt;&lt;\/li&gt;\n\t&lt;li&gt;&lt;span style=\"font-size:24px\"&gt;&lt;s&gt;&lt;u&gt;&lt;em&gt;&lt;strong&gt;This second.&lt;\/strong&gt;&lt;\/em&gt;&lt;\/u&gt;&lt;\/s&gt;&lt;\/span&gt;&lt;\/li&gt;\n\t&lt;li&gt;&lt;s&gt;&lt;u&gt;&lt;em&gt;&lt;strong&gt;&lt;span style=\"background-color:#00ff00\"&gt;And maybe a third&lt;\/span&gt;&lt;\/strong&gt;&lt;\/em&gt;&lt;\/u&gt;&lt;\/s&gt;&lt;\/li&gt;\n&lt;\/ul&gt;

    HTML tags here are in the form of HTML entities.

    1. "<p><s><u><em><strong>This is a custom goal having 3 parts:<\/strong><\/em><\/u><\/s><\/p>\n\n<ul>\n\t<li><span style=\"color:#0000cd\"><s><u><em><strong><span style=\"font-size:28px\"><span style=\"background-color:#ff8c00\">This is the first and the biggest.<\/span><\/span><\/strong><\/em><\/u><\/s><\/span><\/li>\n\t<li><span style=\"color:#ff8c00\"><s><u><em><strong><span style=\"font-size:28px\"><span style=\"background-color:#0000cd\">This is the second amd tte<\/span><\/span><\/strong><\/em><\/u><\/s><\/span><\/li>\n\t<li><span style=\"font-size:26px\"><span style=\"color:#ff8c00\"><s><u><em><strong><span style=\"background-color:#0000cd\">yisohckdskcnk<\/span><\/strong><\/em><\/u><\/s><\/span><\/span><\/li>\n<\/ul>"

    HTML tags here are parsed.

    Data is getting generated in both forms from the editor simultaneously. I am fetching data from the server using jdbc and parsing it using Jsoup (Remove HTML tags from a String).

    In the default form, the second format gets rendered in rtf while the first format is encoded to HTML tags and the tags are rendered as text. By parsing once using Jsoup, the First format is encoded to HTML tags and is displayed as rtf while the second format is stripped of its tags and displayed as simple text without the HTML tags.

    So, this is actually an anomaly of the CKEditor (as it is generating text in two different formats) and not of the datatables.