froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
564 stars 130 forks source link

Embed youtube url #340

Closed freecode23 closed 2 years ago

freecode23 commented 2 years ago

I am not able to embed a youtube video link. it shows up in the editor but once it's submitted the iframe tag dissapears.

iframe tags appears in editor:

Screen Shot 2022-09-27 at 12 52 58 PM

iframe tag disappears once uploaded:

Screen Shot 2022-09-27 at 12 52 49 PM

The config code:

export const froalaConfig = {
    attribution: false,
    placeholderText: "Start typing...",
    imageUpload: true,
    fontSizeSelection: true,
    fontFamilySelection: true,
    videoResponsive: true,
    imageUploadMethod: "POST",
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    imageUploadURL: apiUrl + "upload_froala",
    htmlAllowedEmptyTags: ['textarea', 'a', 'iframe', 'object', 'video', 'style', '.fa', 'p'],
    imageUploadParam: "file",
    htmlAllowedTags: ['a', 'blockquote', 'br', 'div', 'embed', 'h2', 'h3', 'iframe', 'img', 'li', 'ol', 'p', 'strong', 'ul'],
    fontFamily: {
        'Arial,Helvetica,sans-serif': 'Arial',
        'Georgia,serif': 'Georgia',
        'Impact,Charcoal,sans-serif': 'Impact',
        'Tahoma,Geneva,sans-serif': 'Tahoma',
        "'Times New Roman',Times,serif": 'Times New Roman',
        'Verdana,Geneva,sans-serif': 'Verdana',
        'Space Grotesk': 'Space Grotesk',
        'Open Sans': 'Open Sans'
    },
    events: {
        'image.uploaded': function (response) {
            // parse response and array from string
            const data = JSON.parse(response)
            const images_arr = JSON.parse(localStorage.getItem("froalaImages"))
            try {
                // add the image key
                images_arr.push(data.key)

            } catch (err) {
                console.log(err)
            }
            localStorage.setItem("froalaImages", JSON.stringify(images_arr))
        },
        'video.inserted': function ($video) {
            // Do something here.
            console.log($video);
        }
    },
    toolbarButtons: {
        moreText: {
            buttons: [
                "bold",
                "italic",
                "fontSize",
                "fontFamily",
                "underline",
                "strikeThrough",
                "textColor",
                "backgroundColor",
                // "insertVideo"
                // "subscript",
                // "superscript",
                // "inlineClass",
                // "inlineStyle",
                // "clearFormatting"
            ],
            buttonsVisible: 4
        },
        moreParagraph: {
            buttons: [
                "alignLeft",
                "alignCenter",
                "formatOLSimple",
                "alignRight",
                "alignJustify",
                "formatOL",
                "formatUL",
                "paragraphFormat",
                "paragraphStyle",
                "lineHeight",
                "outdent",
                "indent",
                "quote"
            ]
        },
        moreRich: {
            buttons: [
                "insertLink",
                "insertImage",
                "insertVideo",
                "insertTable",
                "emoticons",
                // "fontAwesome",
                "specialCharacters",
                // "embedly",
                "insertFile",
                // "insertHR"
            ]
        },
        moreMisc: {
            buttons: [
                "undo",
                "redo",
                "fullscreen",
                "print",
                "getPDF",
                "spellChecker",
                "selectAll",
                "html",
                "help"
            ],
            align: "right",
            buttonsVisible: 2
        }
    },
    pluginsEnabled: [
        "table",
        "spell",
        "quote",
        "save",
        "quickInsert",
        "paragraphFormat",
        "paragraphStyle",
        "fontFamily",
        "fontSize",
        "help",
        "draggable",
        "align",
        "link",
        "lists",
        "file",
        "image",
        "emoticons",
        "url",
        "video",
        "embedly",
        "colors",
        "entities",
        "inlineClass",
        "inlineStyle",
        // 'codeBeautif '
        // 'spellChecker',
        "imageTUI"
    ]
};
freecode23 commented 2 years ago

allow iframe when dangerouslySetHTML <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(editorContent, { FORCE_BODY: true, ALLOWED_TAGS: ["iframe"], }), }}