BJ Tools VisualEditor

[Andy B]

Is there a way to automatically add a classes to html tags created by ckeditor? Specifically I want the links created by ckeditor to have the class "tc-tiddlylink" so they has the same formatting as links created in tiddlers using tiddlywiki5 syntax.

I was trying without success to add some javascript that would add the class to any <a> element without the class. I couldn't figure out how/where to save a script along these lines:

// Function to add a class to all <a> tags
function addClassToLinks() {
    document.querySelectorAll('a').forEach(function(link) {
        if (!link.classList.contains('your-custom-class')) {
            link.classList.add('your-custom-class');
        }
    });
}

// Create a new MutationObserver instance
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            addClassToLinks();
        }
    });
});

// Configuration object for the observer
const config = { childList: true, subtree: true };

// Start observing the document body for DOM mutations
observer.observe(document.body, config);

// Initial application of the class to all links
addClassToLinks();

[BJ]

HI Andy,

The common place to ask questions has moved to https://talk.tiddlywiki.org/

Tiddlywiki markup treats internal and external links differently, external links are rendered like so:

<a href="https://help.com" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">https://help.com</a>

internal links:

<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#040">040</a>

TW markup can also be used inside the VisualEditor, so the simplest solution is to add the square brackets around links when editing within the visualeditor -

[[aTiddler]]  [[https://google.com]]

BJ

[BJ]

HI Andy,

The common place to ask questions has moved to https://talk.tiddlywiki.org/

Tiddlywiki markup treats internal and external links differently, external links are rendered like so:

`<a href="https://help.com" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">https://help.com</a>`

internal links:

`<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#040">040</a>`

TW markup can also be used inside the VisualEditor, so the simplest solution is to add the square brackets around links when editing within the visualeditor -

[[aTiddler]]  [[https://google.com]]

BJ