Using TinyMCE Razor Syntax

Topics: Writing modules
Jun 13, 2011 at 1:39 PM

Hi guys, this may be very obvious but I am trying to add a TinyMCE Rich Text Editor to one of my Editor Template pages, but I am not too sure of the syntax.

I thought I might able to add the "html" and "tinymce" css classes, but I think this means that none of the CSS and Javascript links are on the page.

Any idea how I might do this?  The code I am using at the moment is the following:

@Html.TextAreaFor(model => model.css, new { @class = "tinymce html" })

 

Jun 13, 2011 at 2:09 PM
Edited Jun 13, 2011 at 2:10 PM

The way to do it is reuse the existing "Body Editor" shape - this way your module will even be compatible with other body editor modules (e.g. CKEditor).

If you look at Orchard.Core/Common/Views/EditorTemplates/Parts.Common.Body.cshtml, you'll see this:

 

<fieldset>
    <label>@T("Body")</label>
    @Display.Body_Editor(Model)
    @Html.ValidationMessageFor(m => m.Text)
</fieldset>

 

The important bit there is @Display.BodyEditor(Model) - that's actually loading and rendering a separate template called Body.Editor.cshtml, which there's a default version of in Orchard.Core, but then the TinyMCE module overrides it with its own version, as does the CKEditor module.

The Model type in the above is "BodyEditorViewModel", although you could can also call it like this:

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

Jun 15, 2011 at 12:33 PM
Dear Randompete,

Thanks for the help, I really appreciate it.
However on my Edit page, how do I populate that HTML Editor with text from the model.
The following code throws an issue:

@Display.Body_Editor(Text: model => model.css, EditorFlavor: "html")

Thanks again for your assistance.

On 13 June 2011 15:09, randompete <notifications@codeplex.com> wrote:

From: randompete

The way to do it is reuse the existing "Body Editor" shape - this way your module will even be compatible with other body editor modules (e.g. CKEditor).

If you look at Orchard.Core/Common/Views/EditorTemplates/Parts.Common.Body.cshtml, you'll see this:

<fieldset>
    <label>@T("Body")</label>
    @Display.Body_Editor(Model)
    @Html.ValidationMessageFor(m => m.Text)
</fieldset>

The important bit there is @Display.BodyEditor(Model) - that's actually loading and rendering a separate template called Body.Editor.cshtml, which there's a default version of in Orchard.Core, but then the TinyMCE module overrides it with its own version, as does the CKEditor module.

The Model type in the above is "BodyEditorViewModel", although you could can also call it by @Display.Body_Editor(Text:"foo").

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com


Jun 15, 2011 at 1:05 PM

What are you trying to achieve with "model=>model.css"? You use that syntax in MVC helper methods like EditorFor<T>(o=>o.Field) - but in those cases what's going on is a lot more complicated, it's actually defining a property selector via a expression.

All you need to do in this case is:

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

Note that Model has a capital letter, and in general properties you add to it should be TitleCased as well, it's just the usual convention.

Oct 18, 2013 at 4:48 PM
randompete wrote:
What are you trying to achieve with "model=>model.css"? You use that syntax in MVC helper methods like EditorFor<T>(o=>o.Field) - but in those cases what's going on is a lot more complicated, it's actually defining a property selector via a expression. All you need to do in this case is: @Display.Body_Editor(Text: Model.Css, EditorFlavor: "html") Note that Model has a capital letter, and in general properties you add to it should be TitleCased as well, it's just the usual convention.
It works for me, consider however that the posted textarea will be named Text and not Css... so you have to capture Text and place in Css property in code...
Nov 22, 2013 at 4:06 AM
How do you pass this data back to the Controller? All of my other model fields are being managed like:

@Html.EditorFor(m => m.CourseName)

But with the rich text editor, it looks like:

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

The problem is, CourseDetails is not being passed back to the Controller during the submit. That field comes back as null. Why? And how do I pass it back properly?
Dec 5, 2013 at 9:46 AM
GregoryHill wrote:
How do you pass this data back to the Controller? All of my other model fields are being managed like:

@Html.EditorFor(m => m.CourseName)

But with the rich text editor, it looks like:

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

The problem is, CourseDetails is not being passed back to the Controller during the submit. That field comes back as null. Why? And how do I pass it back properly?
The submitted value is called "Text", so you can get from Request.Form["Text"] in your driver or controller and put it the appropriate place.
If you can control the name of the properties just rename the body property Text and should work automagically...