Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Where to add TinyMCE custom node filter?

  • #2003
    Avatar photo[anonymous]

    I want to add the following custom node filter to TinyMCE that is used within Publii but I can’t find where it should be added?  I’m not familiar with the way TinyMCE is used within the app (for example, is it embedded or called over the network?) I would be grateful for any advice to locate where the custom node filter should be placed.

    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*\]\]&gt;(--&gt;)?|\/\/\s*(--&gt;)?|\]\]&gt;|\/\*\s*--&gt;\s*\*\/|\s*--&gt;\s*)\s*$/g, '');
    }
    while (i--) {
    node = nodes;
    value = node.firstChild ? node.firstChild.value : '';
    
    if (value.length &gt; 0) {
    node.firstChild.value = trim(value);
    }
    }
    });
    }
    #2005
    Avatar photo[anonymous]

    Hello GoFaster,

    I don’t know what a custom node filter for TinyMCE is but here you can find some information about Publii and TinyMCE:
    https://getpublii.com/dev/post-editor-api/

    Verhoeckx

    #2007
    Avatar photo[anonymous]

    I checked the link. The page describes customization of the HTML structure.

    Who has specific knowledge of the way TinyMCE is used within Publii? The API I am trying to access concerns where a Post is created and processed by TinyMCE before publication. The custom node filter, a standard TinyMCE API call, will act on HTML/XML as it is processed.

    I would be very grateful if someone can provide a description of how TinyMCE processes the input HTML within Publii sufficient for me to grep the right files.

    #2008
    Avatar photo[anonymous]

    “to grep the right files”

    Talking about grep, maybe you can ‘grep’ yourself through the files (if haven’t already done so) and (assuming, hoping, you are on Linux)?

    grep

    grep -lir “search term” .

    location of the files:

    /opt/Publii/resources/app/

    Having said this, hopefully there is someone else that can answer your question.

    #2011
    Avatar photo[anonymous]

    I see I shared the location of the app itself. Of course you have to look in the folder of the websites:

    /home/USERNAME/Documents/Publii

    #2034
    Avatar photo[anonymous]

    Hi @GoFaster,

    The only place where you can add some JS code for the editor is tinymce.script.js file:

    https://getpublii.com/dev/how-to-add-custom-config-or-js-for-post-editor/

    #2043
    Avatar photo[anonymous]
    Tomasz Dziuda wrote:

    Hi @GoFaster,

    The only place where you can add some JS code for the editor is tinymce.script.js file:

    Thanks. I tried it earlier to no avail. The code needs to be inserted further “upstream.”

    Earlier today I tried editing the .asar file directly but that didn’t work (Electron is new to me. I read about the error of my ways later. 🙄 ) The Electron app can be disassembled, changes made to the right component, and then reassembled to run. That approach comes with the obvious disadvantage regarding updates.

    With TinyMCE a node filter can be added to a directory so it is pulled in before or during initialization. The structure of Publii appears to preclude that approach since the Publii files and resources are rolled into the Electron .asar file. Is that correct?

    #2044
    Avatar photo[anonymous]

    @GoFaster – editing app code is a very bad idea – I will try to check if it is possible to allow JS functions in the config overrides somewhat – then you will be able to put it to the config override directly. I will include it in the next Publii Prerelease (if it will be possible) planned for nearest Monday.

    #2110
    Avatar photo[anonymous]

    @GoFaster – I have checked it and unfortunately I am unable to add such possibility in an easy way :/

    #2486
    Avatar photo[anonymous]

    Hey Tomasz, Thanks for checking it out. I appreciate it. I think there may be a way to get to what I’m aiming for but it’ll have to be done in a different way. Like many people, now I have more time… It’s been a bit of a weird month! 🙄