Using Rich Text Editor in Orchard CMS Custom Module

Question

I am creating a custom module in Orchard CMS 1.7.1

So far all is going well (ish)

One of my properties is a string (called InfoBubbleHtml).

I would like to utilise the rich text edit for this input on my modules create/edit form.

Is there a helper already in place that would render my property as a rich text area rather than just a textarea or input field?

If not, what would i need to do to be able to have this property render the rich text editor?

Thanks in advance.

Update

As an update/addition to this question... Any HTML that I enter into my current text area is being ignored; guessing to do with request validation. how is this disabled for my controller so i can allow html in the admin?

Update 2

Ok, so i have figured out how to add this to my view by using:

@Display.Body_Editor(Text:Model.InfoBubbleHtml,EditorFlavor:"html")

Any idea how to set the ID of the editor?

mberacochea mberacochea · Accepted Answer · 2013-11-03T21:25:37

@Display.Body_Editor(Text:Model.InfoBubbleHtml,EditorFlavor:"html") is rendering a shape named Body.Editor.cshtml.

This file lives in : Orchard.Web\Core\Common\Views\Body.Editor.cshtml

And it's content is

@using Orchard.Utility.Extensions;
@{
    string editorFlavor = Model.EditorFlavor;
}
@Html.TextArea("Text", (string)Model.Text, 25, 80, new { @class = editorFlavor.HtmlClassify() })

So using this Shape you cannot set Id, Model is the anon that you send on the Display (Text and EditorFlavor).

Shapes.cs on Orchard.Core/Common is hooking an alternate using the EditoFlavor string.

 public void Discover(ShapeTableBuilder builder) {
            builder.Describe("Body_Editor")
                .OnDisplaying(displaying => {
                    string flavor = displaying.Shape.EditorFlavor;
                    displaying.ShapeMetadata.Alternates.Add("Body_Editor__" + flavor);
                });
        }

So the final file that is rendered : TinyMVC\Views\Body-Html.Editor.cshtml

using Orchard.Environment.Descriptor.Models

@{
    var shellDescriptor = WorkContext.Resolve<ShellDescriptor>();
}

<script type="text/javascript">
    var mediaPickerEnabled = @(shellDescriptor.Features.Any(x => x.Name == "Orchard.MediaPicker") ? "true" : "false");
    var mediaLibraryEnabled = @(shellDescriptor.Features.Any(x => x.Name == "Orchard.MediaLibrary") ? "true" : "false");
</script>

@{
    Script.Require("OrchardTinyMce");
    Script.Require("jQueryColorBox");
    Style.Require("jQueryColorBox");
}

@Html.TextArea("Text", (string)Model.Text, 25, 80,
         new Dictionary<string,object> {
                {"class", "html tinymce"},
                {"data-mediapicker-uploadpath",Model.AddMediaPath},
                {"data-mediapicker-title",T("Insert/Update Media")},
        {"style", "width:100%"}
         })

You need to add this to the template and include another parameter in the TextArea Dictionary parameter named : {"id", "THE ID YOU LIKE"}.

Take a look at the docs about Shapes if you want to learn more Docs

Using Rich Text Editor in Orchard CMS Custom Module

2 Answers