Allow Youtube iFrame from ckeditor

Hi,

Is there a way to allow the youtube iFrame tag from the ckeditor plugin? I've added https://ckeditor.com/cke4/addon/youtube to the ckeditor but everytime I try to save a page the iframe tag gets sanitized/purified/removed.

Thanks in advance.

Comments

  • Take a look at the fuel/application/config/purifier.php settings. By default, there should be a couple iframe specific rules that are commented out:

    'HTML.SafeIframe'          => TRUE, // For iframes
    'URI.SafeIframeRegexp'     => '%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%',
    

    You may also need to add iframe to HTML.Allowed

  • Thanks for your reply,

    I don't think it's the purifier. I've already disabled it completely and the iframe is still deleted.

    This is my purifier.php

    $config['settings'] = array(
    'default' => array(
        'HTML.Doctype'             => 'XHTML 1.0 Strict',
        'HTML.Allowed'             => 'div,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
        //'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
        'AutoFormat.AutoParagraph' => false, // This will cause errors if you globally apply this to input being saved to the database so we set it to false.
        'AutoFormat.RemoveEmpty'   => true,
    ),
    'comment' => array(
        'HTML.Doctype'             => 'XHTML 1.0 Strict',
        'HTML.Allowed'             => 'p,a[href|title],abbr[title],acronym[title],b,strong,blockquote[cite],code,em,i,strike,iframe[src|width|height|class|frameborder]',
        'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
        'AutoFormat.AutoParagraph' => true, 
        'AutoFormat.Linkify'       => true,
        'AutoFormat.RemoveEmpty'   => true,
    ),
    'youtube' => array(
        'HTML.SafeIframe'          => 'true',
        'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
    )
    

    );

    Can it be that it is in the regular sanitizer?

  • Oh... CKEditor will automatically remove iframes. You may have to use a MarkItUp field type instead.

  • Hi,

    I've done everything to stop CKEditor remove the iframes. The iframe tags are in the post to the /fuel/pages/edit controller. I cannot figure out why the tags are still removed.

    Is there a way to disable purifier and sanitzer completely? Just to check.

    This is my editor.php

    // An example of the above as simply a JSON string
    $config['ckeditor']['default'] = "{
    toolbar:[
            ['Bold','Italic'],
            ['Format','Styles'],
            ['FUELImage','HorizontalRule','Youtube'],
            ['NumberedList','BulletedList'],
            ['FUELLink','FUELUnlink'],
            ['Undo','Redo','RemoveFormat'],
            ['PasteFromWord','PasteText'],
            ['Preview'],
            ['Maximize']
        ],
    contentsCss: '".WEB_PATH."assets/utrecht/css/style.css',
    protectedSource: [/\{fuel_\w+\(.+\)\}/g, /<\?[\s\S]*?\?>/g],
    htmlEncodeOutput: false,
    entities: false,
    bodyClass: 'ckeditor',
    toolbarCanCollapse: false,
    removeButtons: 'Subscript,Superscript',
    extraPlugins: 'fuellink,fuelimage,youtube',
    removePlugins: 'link,image',
    extraAllowedContent: 'iframe(*)[*]{*}',
    allowedContent: true,
    youtube_related: false,
    youtube_controls: true,
    youtube_autoplay: false
    }";
    
  • Is this field in the Pages module or your own Simple Module? If it's in your own Simple Module, you can try setting the sanitizing options like so:

    In MY_fuel_modules.php

    $config['modules']['my_module'] = array(
         ....
         'sanitize_input' => array('template','php'),
    );
    

    This has a little documentation on that option under the "Additional Configuration Parameters":
    https://docs.getfuelcms.com/modules/simple

  • Youtube iframes can be used with CKEditor, the Youtube plugin and Purifier.
    You need to use the latest Fuel version that has HTML5_Purifier support.

    ./config/editors.php

    $config['ckeditor']['default'] = array(
       'toolbar' => array(
          ...
          'htmlEncodeOutput' => FALSE,
          'entities' => FALSE,
          'bodyClass' => 'ckeditor',
          'protectedSource' => array('/\{fuel_\w+\(.+\)\}/g', '/<\?[\s\S]*?\?>/g'),
          'toolbarCanCollapse' => FALSE,
          'extraPlugins' => '...,youtube',
          'format_tags' => 'p;h1;h2;h3;h4;pre',
          'allowedContent' => TRUE,
       );
    

    ./config/purifier.php

    $config['settings'] = array(
        'default' => array(
            //'HTML.Trusted'             => TRUE, // For Javascript... must also add 'script' to HTML.Allowed
            'HTML.SafeIframe'          => true, // For iframes
          'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.|player.vimeo.|maps.google.|www.slideshare.)%",
            'Attr.EnableID'            => true,
            'Attr.AllowedFrameTargets' => array('_blank'),
            'HTML.Allowed'             => 'div[id|class],
                section,
                span[class|style|id],
                b,strong,
                i[style|class],em,
                a[href|title|target|class|data-toggle],
                blockquote[id|class|cite],
                ul[class|role],
                ol[class|role],
                li[class|role],
                p[style|class],
                br,hr,
                span[style],
                img[id|width|height|alt|src|class],
                table[style|class],tbody[style|class],thead[style|class],tr[style|class|align],th[style|class|align],td[style|class],
                iframe[src|name|width|height|class|allow|style],
                h1[style|class],h2[style|class],h3[style|class],h4[style|class],h5[style|class],h6[style|class]',
            //'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
            'AutoFormat.AutoParagraph' => false, // This will cause errors if you globally apply this to input being saved to the database so we set it to false.
            'AutoFormat.RemoveEmpty'   => false,
          //'HTML.Doctype' => 'HTML 4.01 Transitional',
          'HTML.Doctype' => 'HTML5',
          'HTML.IframeAllowFullscreen' => true,
    
          'URI.DisableExternalResources' => false,
          'Attr.AllowedFrameTargets' => '_blank, _self, _target, _parent',
          'Attr.EnableID'=> true,
          'AutoFormat.Linkify'=> false,
        ),
        'comment' => array(
            'HTML.Doctype'             => 'XHTML 1.0 Strict',
            'HTML.Allowed'             => 'p,a[href|title|target],abbr[title],acronym[title],b,strong,blockquote[cite],code,em,i,strike',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
            'AutoFormat.AutoParagraph' => TRUE,
            'AutoFormat.Linkify'       => TRUE,
            'AutoFormat.RemoveEmpty'   => false,
        ),
        'youtube' => array(
            'HTML.SafeIframe'          => TRUE,
            'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
        )
    );
    
    // This provides a simpler way of adding custom attributes not currently supported by Purifier then by extending the config class
    // More information about adding custom attributes can be found here:
    // http://htmlpurifier.org/docs/enduser-customize.html
    $config['custom_attributes'] = array(
       ['a', 'data-toggle', 'CDATA'], // Array format
       ['ul', 'role', 'CDATA'], // Array format
       ['ol', 'role', 'CDATA'], // Array format
       ['li', 'role', 'CDATA'], // Array format
       ['iframe', 'allow', 'CDATA'], // Array format
        //'ul|role|CDATA', // String format
    );
    
    $config['config_class'] = 'HTMLPurifier_HTML5Config'; // For HTML 5 compatibility issues, try installing https://github.com/xemlock/htmlpurifier-html5 (requires composer install)
    //$config['config_class'] = 'HTMLPurifier_Config';
    
    // Determines where to cache the definitions files.
    // Set to FALSE if you don't want to cache (like during testing)
    $config['cache_path'] = APPPATH.'/cache';
    
    //$config->set('Cache.DefinitionImpl', null); //switches off caches
    
  • Thanks @almostcompletely,

    You're a livesaver.

Sign In or Register to comment.