Tiptap Youtube extension

✅ Solved4️⃣v4

Hey

Has anyone managed to get the youtube extension working for the v4 tiptap editor? I've follow the docs and managed to get the javascript extension to load and I'm able en embed youtube videos fine on the frontend.

However, when saving the iframe is just removed from the html. As far as I understand, this is because we also need to have a php youtube extension available on the server to be able to save to the database and render but that php extension doesn't exist.

Which is why I've tried copying the javascript extension side by side and recreate it in php but I get no errors anywhere, even though dd'ing inside the php extension works. It just quitely save my content without the iframe.

Anyone has experienced this before?

Solution

try this:

public function parseHTML(): array
{
    return [
        [
            'tag' => 'div[data-youtube-video] iframe',
        ],
    ];
}

public function renderHTML($node, $HTMLAttributes = []): array
{
    $json = [
        'div',
        ['data-youtube-video' => ''],
        ['iframe', HTML::mergeAttributes([], $this->options['HTMLAttributes'], $HTMLAttributes)],
    ];

    return $json;
}

public function parseHTML(): array
{
    return [
        [
            'tag' => 'div[data-youtube-video] iframe',
        ],
    ];
}

public function renderHTML($node, $HTMLAttributes = []): array
{
    $json = [
        'div',
        ['data-youtube-video' => ''],
        ['iframe', HTML::mergeAttributes([], $this->options['HTMLAttributes'], $HTMLAttributes)],
    ];

    return $json;
}

I did a custom implementation so that I could also do vimeo videos as well if you want to check out the code.

https://github.com/awcodes/richer-editor/blob/1.x/src/Plugins/EmbedPlugin.php
https://github.com/awcodes/richer-editor/blob/1.x/src/Extensions/Embed.php
https://github.com/awcodes/richer-editor/blob/1.x/resources/js/embed.js

Jump to solution

Tiptap Youtube extension

✅ Solved4️⃣v4

Solution

try this:

public function parseHTML(): array
{
    return [
        [
            'tag' => 'div[data-youtube-video] iframe',
        ],
    ];
}

public function renderHTML($node, $HTMLAttributes = []): array
{
    $json = [
        'div',
        ['data-youtube-video' => ''],
        ['iframe', HTML::mergeAttributes([], $this->options['HTMLAttributes'], $HTMLAttributes)],
    ];

    return $json;
}

public function parseHTML(): array
{
    return [
        [
            'tag' => 'div[data-youtube-video] iframe',
        ],
    ];
}

public function renderHTML($node, $HTMLAttributes = []): array
{
    $json = [
        'div',
        ['data-youtube-video' => ''],
        ['iframe', HTML::mergeAttributes([], $this->options['HTMLAttributes'], $HTMLAttributes)],
    ];

    return $json;
}

Jump to solution

Tiptap Youtube extension

Tiptap Youtube extension

Similar Threads

Similar Threads

Similar Threads