How to add custom html code into Typo3 CKEditor? - Stack Overflow

admin管理员组

文章数量:1414613

In the typo3 introduction package Buttons where utilized in the CKEditor:

In my own website (with fluid styled content) i also have a 'Source' button as follows:

<button type="button" class="btn">Name</button>

However when i type html code into the RTE and press 'Save' it removes everything except the text. This makes it impossible for me to add Buttons. What can i do to add custom html code, such as buttons, into my CKEditor like in the introduction package?

In the typo3 introduction package Buttons where utilized in the CKEditor:

In my own website (with fluid styled content) i also have a 'Source' button as follows:

<button type="button" class="btn">Name</button>

However when i type html code into the RTE and press 'Save' it removes everything except the text. This makes it impossible for me to add Buttons. What can i do to add custom html code, such as buttons, into my CKEditor like in the introduction package?

• typo3
• ckeditor

Share Improve this question Follow edited Apr 16 at 8:48 MachineLeon asked Feb 23 at 11:43 MachineLeonMachineLeon 6511 silver badge66 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

You need to allow the needed tags in a custom RTE preset.

Here is how to implement a custom preset:
https://docs.typo3./c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Examples.html#how-do-i-create-my-own-preset

And here you can see how to allow the needed html tags in the RTE:
https://docs.typo3./c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Examples.html#how-do-i-allow-a-specific-tag

I solved it. Instead of utilizing the button element:

<button type="button" class="btn">Name</button>

I utilized the a element:

<a class="btn btn-secondary" href="link">Name</a>

This seems to be natively supported by RTE editor.

the bootstrap package do not add custom html afaik. it adds simply bootstrap classes to anchors.

<a class="btn btn-success" href="t3://page?uid=8">test</a>

this can be done via the config.yaml of your ckeditor config in the styles section.

see https://docs.typo3./c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Examples.html (edited)

本文标签： How to add custom html code into Typo3 CKEditorStack Overflow