Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Question

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them.

What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to do so in TinyMCE, it automatically changes them to:

<style><!-- th{width:80px} --></style>

and for script content, it alters it to:

<script>// <![CDATA[
$.address.unbind();
// ]]></script>

In my TinyMCE initialization configuration, I have the following settings:

valid_elements : "*[*]",
extended_valid_elements : "*[*],script[charset|defer|language|src|type],style",
custom_elements: "*[*],script[charset|defer|language|src|type],style",
valid_children : "+body[style],+body[script]",
verify_html : false,
media_strict: false

Despite these settings, I am struggling to find a solution that prevents TinyMCE from deactivating the <style> and <script> elements.

javascript html css tinymce

Answer 1

Answer №1

I highly recommend refraining from directly customizing third-party libraries whenever possible. Instead, I implemented a custom node filter on the editor's serializer during initialization by including the following in the configuration object passed to the tinymce construction call:

init_instance_callback : function(editor) {
    // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
    //     just remove the escaping and not add it back.
    editor.serializer.addNodeFilter('script,style', function(nodes, name) {
        var i = nodes.length, node, value, type;

        function trim(value) {
            /*jshint maxlen:255 */
            /*eslint max-len:0 */
            return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '');
        }
        while (i--) {
            node = nodes[i];
            value = node.firstChild ? node.firstChild.value : '';

            if (value.length > 0) {
                node.firstChild.value = trim(value);
            }
        }
    });
}

Hopefully this solution will benefit others facing similar challenges.

Answer 2

I highly recommend refraining from directly customizing third-party libraries whenever possible. Instead, I implemented a custom node filter on the editor's serializer during initialization by including the following in the configuration object passed to the tinymce construction call:

init_instance_callback : function(editor) {
    // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
    //     just remove the escaping and not add it back.
    editor.serializer.addNodeFilter('script,style', function(nodes, name) {
        var i = nodes.length, node, value, type;

        function trim(value) {
            /*jshint maxlen:255 */
            /*eslint max-len:0 */
            return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '');
        }
        while (i--) {
            node = nodes[i];
            value = node.firstChild ? node.firstChild.value : '';

            if (value.length > 0) {
                node.firstChild.value = trim(value);
            }
        }
    });
}

Hopefully this solution will benefit others facing similar challenges.

Answer 3

Answer №2

To modify the tinymce.min.js, you can experiment with different lines of code.

,f.addNodeFilter("script,style",function(e,t){function n(e){return e.replace(/(<!--\[CDATA\[|\]\]-->)/g,"\n").replace(/^[\r\n]*|[\r\n]*$/g,"").replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi,"").replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g,"")}for(var r=e.length,i,o,a;r--;)i=e[r],o=i.firstChild?i.firstChild.value:"","script"===t?(a=i.attr("type"),a&&i.attr("type","mce-no/type"==a?null:a.replace(/^mce\-/,"")),o.length>0&&(i.firstChild.value="// <![CDATA[\n"+n(o)+"\n// ]]>")):o.length>0&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")}),f.addNodeFilter("#comment",function(e){for(var t=e.length,n;t--;)n=e[t],0===n.value.indexOf("[CDATA[")?(n.name="#cdata",n.type=4,n.value=n.value.replace(/^\[CDATA\[|\]\]$/g,"")):0===n.value.indexOf("mce:protected ")&&(n.name="#text",n.type=3,n.raw=!0,n.value=unescape(n.value).substr(14))})

If needed, feel free to delete or adjust any lines in the provided code snippet above.

Answer 4

To modify the tinymce.min.js, you can experiment with different lines of code.

,f.addNodeFilter("script,style",function(e,t){function n(e){return e.replace(/(<!--\[CDATA\[|\]\]-->)/g,"\n").replace(/^[\r\n]*|[\r\n]*$/g,"").replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi,"").replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g,"")}for(var r=e.length,i,o,a;r--;)i=e[r],o=i.firstChild?i.firstChild.value:"","script"===t?(a=i.attr("type"),a&&i.attr("type","mce-no/type"==a?null:a.replace(/^mce\-/,"")),o.length>0&&(i.firstChild.value="// <![CDATA[\n"+n(o)+"\n// ]]>")):o.length>0&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")}),f.addNodeFilter("#comment",function(e){for(var t=e.length,n;t--;)n=e[t],0===n.value.indexOf("[CDATA[")?(n.name="#cdata",n.type=4,n.value=n.value.replace(/^\[CDATA\[|\]\]$/g,"")):0===n.value.indexOf("mce:protected ")&&(n.name="#text",n.type=3,n.raw=!0,n.value=unescape(n.value).substr(14))})

If needed, feel free to delete or adjust any lines in the provided code snippet above.

Answer 5

Answer №3

After storing tinymce content, it is important to sanitize the output by removing certain tags. Here’s an example of how you can achieve this:

$sanitizedOutput = str_replace(array("// <![CDATA[", "// ]]>"), array("", ""), $_POST['tinymceContent']);

Once the output is sanitized, proceed to save it in the database.

Answer 6

After storing tinymce content, it is important to sanitize the output by removing certain tags. Here’s an example of how you can achieve this:

$sanitizedOutput = str_replace(array("// <![CDATA[", "// ]]>"), array("", ""), $_POST['tinymceContent']);

Once the output is sanitized, proceed to save it in the database.

Answer 7

Answer №4

In my experience, I found success by deleting the code that disables script tag formatting:

If (o.length > 0 && i.firstChild.value = "//<![CDATA[\n" + n(o) + "\n//]]>")

Additionally, to format the style tag, it's recommended to remove:

&&(i.firstChild.value = "<!--\n" + n(o) + "\n-->")

Answer 8

In my experience, I found success by deleting the code that disables script tag formatting:

If (o.length > 0 && i.firstChild.value = "//<![CDATA[\n" + n(o) + "\n//]]>")

Additionally, to format the style tag, it's recommended to remove:

&&(i.firstChild.value = "<!--\n" + n(o) + "\n-->")

Answer 9

Answer №5

To prevent tinymce from recognizing style and script tags, consider using < instead of <.

Here is an example:

For style:

&lt;style>th{width:80px}&lt;/style>

For script:

&lt;script>
$.address.unbind();
&lt;/script>

Answer 10

To prevent tinymce from recognizing style and script tags, consider using < instead of <.

Here is an example:

For style:

&lt;style>th{width:80px}&lt;/style>

For script:

&lt;script>
$.address.unbind();
&lt;/script>

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

React-dnd enhances the functionality of the MUI tree view

The preflight request's response failed to meet the access control criteria due to the absence of the 'Access-Control-Allow-Origin' header

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

No specified margin at the top of the website's header section

Turn off and then turn on user input without exiting the textarea

Unable to send a namespaced action from a different module: [vuex] action type is not recognized

Discover past stock prices on Yahoo Finance

Utilize the Google Drive API to easily upload an Excel file

jQuery - Wait for the completion of one UI change before initiating another UI change

Fill every empty element with elements from another array

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

Timeout error occurred in Async.js because the callback was already triggered

The Art of CSS Arrangement

What is the method for obtaining the WordPress user ID?

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

Tips for displaying HTML content in an AJAX success alert message with ASP.NET MVC and jQuery

Node.js Promise Rejection: TypeError - Unable to access property 'sign' because it is undefined

Using Javascript to make a call to load or post with jQuery

Facing issues with Heroku and Express/Nodejs crashing?

Transferring an object from one inventory to another