Creating an embeddable content plugin
This is the third in our series of videos showing how to build a real extension for Telligent Community.
In this video we're going to add some real functionality to our plugin, and make it show in the Rich Text Editor Insert menu.
The Rich Text Editor is used throughout Telligent Community, and has an Insert menu that can be used to insert items into the content, such as links, images or polls.
We can extend the options in the Insert list by implementing the IEmbeddableContentFragmentType interface.
Transcript
Hi, I'm Rhys, and this is the third in our series of videos showing how to build a real extension for Telligent Community.
In this video we're going to add some real functionality to our plugin, and make it show in the Rich Text Editor Insert menu.
The Rich Text Editor is used throughout Telligent Community, for example when creating a forum post. In Telligent 9 and later the editor has an Insert menu that can be used to insert items into the content, such as links, images or polls.
We can extend the options in the Insert list by implementing the IEmbeddableContentFragmentType interface.
Implementing the IEmbeddableContentFragmentType plugin
The first thing we need to do is add a reference to the Telligent.Evolution.Api.dll, we can then add the IEmbeddableContentFragmentType to our class. In Telligent 10 you don't need to reference this DLL as it's already available in Telligent.Evolution.Platform.dll.
This interface defines quite a few properties and methods we need to implement.
The first three are pretty straight forward, the name, description and an ID. We will allow the name and description to be translated so can use the translation controller, and add some default values for these. The name is what will be shown in the Insert menu of the editor. The ID should be a GUID that is not used by any other embeddable content fragment type, we'll create a readonly Guid and then return that.
Next we have the configuration that will be shown to the user when they choose to insert from a template, at this point we will just show a Rich Text Editor, with the default content based on the value configured in the administration area. The configuration code works in the same way as the plugin configuration code we added in the first video. We can use the static ContentFragmentConfiguration class we created in that video to get access to the configured value.
The plugin requires an icon that will be displayed in the Insert menu, and in the editor to indicate where the value will be placed. To keep things simple I'm going to reuse the image for the code embed option. In a later video we can look at adding a new image. I'm going to use CentralizedFileStorage class to get the URL of the embed code image.
For now I'm going to leave the AddUpdateContentFragments method empty, and always return true for the CanEmbed method. In the Validate method I'm also always going to return that the content is valid. We'll be looking at extending these in later videos to ensure that the content is valid and restrict what content types the menu option will appear for.
The final method to implement is the Render method, at this point all were going to do is return the HTML entered by the user.
We can again build and copy the DLL to the site, and reload the page with our editor, and will now have our new option in the Insert menu. Selecting this will show a Rich Text Editor with our configured template populated, we can edit the contents of this and then click OK. A placeholder will then be added to the content.
Once we save the post, we can then see the placeholder replaced the value we entered.
Summary
In this video we've looked at how to add options to the Insert menu in the Rich Text Editor. In the next couple of videos we'll expand on this, with more complicated configuration options, allowing the user to pick from multiple templates.