CODEWITHSUNDEEP
froala
curious1
curious1

Reputation: 14717

Froala WYSIWYG editor: why am I not able to insert Youtube video link or embed code into the editing area?

I would like to use Froala editor and am testing it out. With the following settings, I am able to see the insert video button, and I am able to open a small window in order to add a Youtube link or embed code. However, when entering the link or embed code and clicking the Insert button, nothing shows up in the editing area. What is wrong?

        $('textarea').froalaEditor({
            charCounterCount: true,
            codeMirror: false,
            charCounterMax: 1000,  
            direction: 'ltr',  
            disableRightClick: false,  
            editorClass: 'froala-editor', 
            htmlAllowComments: false,
            htmlAllowedEmptyTags: [],
            htmlExecuteScripts: false,
            htmlRemoveTags: ['script', 'style', 'base'],
            placeholderText: '',
            pluginsEnabled: ['align','codeView','colors','draggable','emoticons','entities','fontFamily','fontSize','fullscreen','image','lineBreaker','link','lists','paragraphFormat','quote','video'],
            shortcutsEnabled:   ['show', 'bold', 'italic', 'underline', 'strikeThrough', 'indent', 'outdent', 'undo', 'redo', 'insertImage', 'createLink'],
            spellcheck: false,
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '|', 'insertLink', 'insertImage', 'insertVideo', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'help', 'html', '|', 'undo', 'redo'],
            toolbarButtonsSM: null,
            toolbarButtonsXS: null,
            toolbarSticky: false,  
            toolbarVisibleWithoutSelection: true,
            imageAllowedTypes: ['jpeg', 'jpg', 'png','gif'],
            imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageAlt', 'imageSize'],
            imageMaxSize: 1024 * 1024 * 1, 
            linkInsertButtons:  ['linkBack'],
            paragraphFormat: {
                N: 'Normal',
                H1: 'Heading 1',
                H2: 'Heading 2',
                H3: 'Heading 3',
            },
            videoAllowedProviders: ['youtube', 'vimeo'],
            videoInsertButtons: ['videoBack', '|', 'videoByURL', 'videoEmbed']
        }) 
    });

Upvotes: 1

Views: 2327

Answers (1)

curious1
curious1

Reputation: 14717

I found out that the answer. For

htmlAllowedEmptyTags

it should not be empty. Initially, I would like to exclude script, but went too far. Now with the following, I am able to insert a vide link.

htmlAllowedEmptyTags: ['textarea', 'a', 'iframe', 'object', 'video', 'style','.fa']

Hope this helps other people who came here.

Upvotes: 2

Related Questions