[tw5] BJ Tools VisualEditor

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 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 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();

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:

https://help.com

internal links:

040

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

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](https://help.com)" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">[https://help.com](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