Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Allow oembed tag in ckeditor

I want to put oembed tags into the ckeditor RTE of TYPO3. This way I want to put social post like instagram, facebook or twitter into some news article (in the middle of some text).

For this purpose I have activated the embed plugins of ckeditor and put the oembed tag under processing in allowedTags. I also defined the oembed tag in the constants for styles.content.allowTags.

Here my yaml:

imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }

editor:
    config:
        contentsCss: "EXT:mysitepackage/Resources/Public/Css/rte.css"

        stylesSet:
            - { name: "Lead", element: "p", attributes: { 'class': 'lead' } }

        toolbarGroups:
            - { name: styles, groups: [ format, styles ] }
            - { name: basicstyles, groups: [ basicstyles ] }
            - { name: paragraph, groups: [ list, indent, blocks, align ] }
            - "/"
            - { name: links, groups: [ links ] }
            - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
            - { name: editing, groups: [ spellchecker ] }
            - { name: insert, groups: [ insert ] }
            - { name: tools, groups: [ table, specialchar ] }
            - { name: document, groups: [ mode ] }

        format_tags: "p;h1;h2;h3;h4;h5;pre"

        justifyClasses:
            - text-left
            - text-center
            - text-right
            - text-justify

        extraPlugins:
            - justify
            - embedsemantic
            - autoembed

        removePlugins:
            - image

        removeButtons:
            - Anchor
            - Underline
            - Strike

        autoEmbedWidget: "embedsemantic"
        embed_provider: "https://my.iframely.instance/oembed?url={url}&callback={callback}"

        extraAllowedContent: '*(*)[data-*]; oembed'

processing:
    allowTags:
        - oembed

This row in the constants:

styles.content.allowTags := addToList(oembed)

I'm now able to put the oembed into the RTE and its displayed teaser of the social post. After saving the content the oembed tag is replaced by a p tag

What am I missing?

like image 688
René Pflamm Avatar asked Feb 05 '18 12:02

René Pflamm


People also ask

How do I add plugins to CKEditor 5?

Adding a plugin to a buildClone the build repository. Install the plugin package. Add it to the build configuration.


1 Answers

From my experience, if something gets replaced with something else (especially the p tag), chances are high it is related to the Advanced content filter.

I can't pinpoint the error in your config, but have you tried disabeling ACF completely? (see allowedContent)

allowedContent = true;
(and remove the extraAllowedContent)

If that works, don't leave it like that (see security best practices), but work your way through to find the correct setting.

Maybe explicitly add the wildcard attributes in the extraAllowedContent:

extraAllowedContent: '*(*)[data-*]; oembed(*){*}[*];'
like image 137
gna Avatar answered Oct 10 '22 18:10

gna