Inserting custom HTML in text notes

[Mangiola]

I'm trying to insert HTML elements into regular text notes, such as divs with custom classes. My current approach is to create a widget that looks for written HTML tags in the note and actually render them in place within the DOM.

I've encountered a problem where any special HTML being inserted into the note gets removed; inserting <p class='myClass'>test</p> into the page just adds the plain text "test" without the class. I assume it's because CK Editor sanitizes input.

Is there a better approach? I'd love to have custom elements within text notes without having to include render notes. This would be very useful!

[zadam]

Hi, I'm not aware of any solution for this.

[zadam]

I see, I didn't really look into it in detail.

CKEditor can normally work only with plugins added at build time. Relatively recently they added new DLL plugins which can be added dynamically but I don't know what's their scope.

BTW, I'm curious, why do you actually need custom HTML? I mean, what's you use case?

[Mangiola]

I'll look into DLL plugins, thanks.

The reason I'd like to edit the HTML is because customizing text notes feels pretty limited:

• You can only add CSS to general HTML tags. Useful for basic styling but limited if you want to style only a particular string of text (think of Microsoft Word: you can create unlimited custom styles, save them to a palette, and apply them arbitrarily).
• The palette of font colors can't be dynamically changed with themes, so some text may be unreadable if you swap themes. There also isn't an easy way to add your own custom colors.
• Adjusting the page layout (like adding columns) is only possible with tables. This wouldn't be a problem, but CK Editor's tables are very cumbersome for this purpose. The entire cell gets highlighted when you add text and the table editing toolbar is always in the way. Even after all that, it's a chore to always make the table borders transparent so it looks nice.

Being able to edit the note's HTML freely would be a fix to all my gripes and offer many more possibilities: embedding all kinds of media, adding custom symbols and icons within text, etc. Though I do recognize that for the majority of users, the default CK Editor is probably completely fine.

[RawmanGrey]

+1, editing source in notes seems organic to app. I'm just starting with Trilium, and thrilled by it's radical customizing abilities. Once I've stumbled on spoiler-details element missing, I've come to this discussion in search of a way to insert custom html. Apart from <details ... />, there are so much more possibilities : ) Also, semantic elements can improve public notes.

I don't have experience with CKEditor, so forgive my shallow search: may Source editing plugin be the solution?

[zadam]

I don't have experience with CKEditor, so forgive my shallow search: may Source editing plugin be the solution?

I don't think it is, at least for what people usually want to use this, because:

The changes made to the document source will be applied to the editor’s data model only, if the editor understands (via loaded plugins) the given syntax. You will lose all changes that the editor features cannot understand. For example, if the editor does not have a horizontal line plugin loaded, the <hr> tag added in the document source will be removed upon exit from the source editing mode.

Maybe in combination with this: https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html

But I haven't looked at them in detail and they also seem to be rather new and immature.

[RawmanGrey]

So, one day... Zadam, thank you for the great app, your determination is remarkable 🙏

[jobidon]

You might want to consider doing it through the script API
'
const noteSource="< p class='myClass' >test< /p >";
const note = api.createTextNote(api.getDateNote().noteId, 'title', noteSource).note;
'
(note that spacing was added in the HTML )

[Mangiola]

The code does attempt to create custom HTML, but the class (and any other attribute) gets removed once you edit the page. If I figure out a way to disable CKEditor's default behaviour, this would definitely work.

[ZellNoX]

did you find solution ?

[CobriMediaJulien]

Check here for the general html bullet point. You have to insert or change the note type to code html type and then back to text.
https://github.com/orgs/TriliumNext/discussions/5995