Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

How to add Brightcove video in Rich Text Editor

Vote:
 

My client wants to add Brightcove videos in rich text directly, however, the the rich text editor auto cleanup function deletes the Brightcove everytime.

I tested it for a while, and it seems that you can not directly add any

I am currently telling them to use my custom embedded block, and drag & drop the blocks to rich text. However a lot of their legacy content has Brightcove videos, I am worried that those content may get auto cleaned when they update them.

Do you guys have any idea how to release the restiction on embedded content in rich text editor?

PS. I am using version 8.11.0, will upgrading to 9.6.0 help?

#144794
Feb 18, 2016 21:03
Vote:
 

Hi,

You need to change the valid elements for TinyMCE and add the object emelent. You can do this either in web.config (http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/Configuration/Configuring-episerver/) or by a plugin (http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/).

#144805
Feb 19, 2016 9:11
Vote:
 

... and video and embed, if you want to support them as well.

#144806
Feb 19, 2016 9:12
Vote:
 

What about taking a slightly different route, in creating a dynamic content? You could name it "Embedded code", or something along those lines. In it, you could have a string property which could be rendered unencoded. This way, you wouldn't have to care what elements are valid in TinyMCE.

#144858
Feb 19, 2016 19:12
Vote:
 

Thanks Holvik, I really like your idea, is there a way to create a textarea field? I tried PropertyLongString, but it still rendered as a single line input in the dialog.

This is my testing code:

[DynamicContentPlugIn(
    DisplayName = "Embedded Code",
    Description = "Embed code here to prevent auto cleanup")]
public class EmbeddedCode : DynamicContentBase, IDynamicContentView
{
    private const string EmbeddedCodeField = "Embedded Code";

    public EmbeddedCode()
        : base()
    {
        Properties.Add(EmbeddedCodeField, new PropertyLongString());
    }

    public void Render(System.IO.TextWriter writer)
    {
        writer.Write(HttpUtility.HtmlDecode(Properties[EmbeddedCodeField].ToString()));
    }
}



#144859
Edited, Feb 19, 2016 20:27
Vote:
 

Just a heads-up... I would call Dynamic Content a legazy feature. It's replaced with blocks.
Anyway, I would either allow embedding in TinyMCE, or create a block or do a content provider like this http://world.episerver.com/Blogs/Per-Magne-Skuseth/Dates/2014/10/23-Video-content-provider/

#144864
Feb 19, 2016 21:30
Vote:
 

And you still have problem with old content, that will get replaced when pages are saved again.

#144865
Feb 19, 2016 21:31
Vote:
 

Thanks Johan, I guess I have to allow embedding in TinyMCE for the old content. I have never played with Dynamic Content before, no idea it's on its path to obsolete, and it does feel like block in a certain way.

A content provider is cool, however, I doubt we have the budget to give it more functions other than seperating content in different tabs.

#144867
Feb 19, 2016 21:41
Vote:
 

Hi Johan, I have tried to create the tiny mce plugin to allow embedding. Here is my code:

[TinyMCEPluginNonVisualAttribute(
    AlwaysEnabled = true,
    PlugInName = "TinyMceExtendedValidElements",
    DisplayName = "Extended Valid Elements",
    Description = "Extended valid elements in init options.",
    EditorInitConfigurationOptions = @"{
        cleanup : false,
        media_strict: false,
        plugins: ""pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,spellchecker,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist"",
        extended_valid_elements : ""object[width|height|classid|codebase],param[name|value],embed[src|type|width|height|flashvars|wmode]""
    }")]
public class TinyMceExtendedValidElements
{
}

TinyMce is still clearing the embedded code. I followed the steps and I made sure there is no error in console (I have encountered 404 and 500 errors when the setting is not complete or the format is wrong).

I have tried using extended_valid_elements alone, but no effect. Then I went to TinyMce forum and fount out that in new versions "media" plugin is the solution, then I added the plugin, still no effect. cleanup: "false" is just a desperate move, this setting has been deleted from TinyMce.

#144869
Feb 19, 2016 23:30
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.