Mike Robbins

Sitecore Developer Blog

Follow me on GitHub

Sitecore SPEAK Rich Text Editor

One of the features I think has been missing from Sitecore SPEAK is a Rich Text component. This blog post is a custom Rich Text Editor I have created for Sitecore SPEAK, The underlying Rich Text Editor is provided by Tiny MCE.

Sitecore SPEAK Rich Text Editor

Sitecore SPEAK Rich Text Editor

Toolbar

Toolbar

Configuration

Once the Sitecore package has been installed (Releases at the end of this page), the component is ready to be used in SPEAK applications. The Rich Text Editor will then appear when you insert a rendering into the design layout of your SPEAK application.

Rich Text Editor Rendering

Rich Text Editor Rendering

The parameter template of the Rich Text Editor allows you to set the ID, and both the height and width of the rendered editor. The text property will get bound to the html value within the editor, you can also set an initial value for the html in the editor.

Rendering Parameters

Rendering Parameters

Multiple Rich Text Editors on a single SPEAK form is supported, ensure each RTE has an ID set and that they are all unique.

Multiple Rich Text Editors

Multiple Rich Text Editors

Plugins

Tiny MCE Plugings can be added to the RTE, in the rendering parameters there is a field called plugins. This field can take a string of space seperate plugin names to enable on the RTE. For available plugins please see http://www.tinymce.com/wiki.php/Plugins.

Coding Against The RTE

While debugging the SPEAK application within the console of your browser, you can access the Rich Text Editor via the below. (Where RichText1 is the ID of your component)

Sitecore.Speak.app.RichText1.viewModel

The text() of the viewModel has a get / set where you can read and write HTML in the Rich Text Editor. e.g. this.RichText1.viewModel.text("

Some text

")

You can get access to the underlying Rich Text Editor via:

tinyMCE.get("RichTextEditorID")

Compatibility

The component was built and tested on Sitecore 8. However as the component is built on SPEAK 1.1 the component should work on Sitecore 7.2- 7.5. I will do some testing to ensure the component works correctly on Sitecore 7.x.

Releases (Sitecore Package)

https://github.com/komainu85/MikeRobbinsSPEAKRichTextEditor/releases

Source On GitHub

https://github.com/sobek85/MikeRobbinsSPEAKRichTextEditor