Using TinyMCE of orchard

Topics: General, Writing modules
Apr 13, 2013 at 9:54 AM
Hi all,

In a file view cshtml, I have reuse a TinyMCE of Orchard to show a HTML editor.

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

It already show a HTML editor, but when I submit, the field Model.Description is still null.

Please give me some ways to resolve it.
Thanks,
Hien Phan
Developer
Apr 13, 2013 at 11:29 AM
Edited Apr 13, 2013 at 11:30 AM
The Body_Editor shape renders a textarea whose name is set to "Text" (which matches the Text property of the BodyPart).
So in stead of using that shape, render the textarea yourself, e.g.:
@Html.TextArea("Description", (string)Model.Text, 25, 80, new { @class = "html" })
Apr 13, 2013 at 5:11 PM
sfmskywalker wrote:
The Body_Editor shape renders a textarea whose name is set to "Text" (which matches the Text property of the BodyPart).
So in stead of using that shape, render the textarea yourself, e.g.:
@Html.TextArea("Description", (string)Model.Text, 25, 80, new { @class = "html" })
Do you miss any reference?
My model doesn't have the Text field (Model.Text). With above code, It throw an error.
If I replace to @Html.TextArea("Description", (string)Model.Description, 25, 80, new { @class = "html" }), it only display a normal textarea.
Do I have any mistakes?
Developer
Apr 13, 2013 at 5:19 PM
Try this:
@{ 
    Script.Require("OrchardTinyMce");
}
@Html.TextArea("Description", (string)Model.Description, 25, 80,
     new Dictionary<string,object> {
        {"class", "html tinymce"},
        {"data-mediapicker-uploadpath",Model.AddMediaPath},
        {"data-mediapicker-title",T("Insert/Update Media")},
        {"style", "width:100%"}
     })
Note: this code has been copied from another file. It has not been tested.
Essentially, you need to render the textarea yourself and have it initialized by TinyMce.
Developer
Apr 13, 2013 at 5:21 PM
Just to be extra clear: your model probably doesn't have the AddMediaPath property, but it's here to demonstrate how you can initialize the uploadpath of the mediapicker. You need to tweak things to make it work for you.
Apr 15, 2013 at 2:28 AM
sfmskywalker wrote:
Try this:
@{ 
    Script.Require("OrchardTinyMce");
}
@Html.TextArea("Description", (string)Model.Description, 25, 80,
     new Dictionary<string,object> {
        {"class", "html tinymce"},
        {"data-mediapicker-uploadpath",Model.AddMediaPath},
        {"data-mediapicker-title",T("Insert/Update Media")},
        {"style", "width:100%"}
     })
Note: this code has been copied from another file. It has not been tested.
Essentially, you need to render the textarea yourself and have it initialized by TinyMce.
Hi,

Currently, I disable "data-mediapicker-uploadpath attribuite".
When i submit form, it throw an error:
A potentially dangerous Request.Form value was detected from the client (Description="<p>Description</p>").

Please give me a way to resolve it.
Developer
Apr 15, 2013 at 5:47 PM
You should Bing that one, you'll find the answer.
Nov 22, 2013 at 3:00 PM
Edited Nov 22, 2013 at 3:06 PM
sfmskywalker wrote:
Try this:
@{ 
    Script.Require("OrchardTinyMce");
}
@Html.TextArea("Description", (string)Model.Description, 25, 80,
     new Dictionary<string,object> {
        {"class", "html tinymce"},
        {"data-mediapicker-uploadpath",Model.AddMediaPath},
        {"data-mediapicker-title",T("Insert/Update Media")},
        {"style", "width:100%"}
     })
Note: this code has been copied from another file. It has not been tested.
Essentially, you need to render the textarea yourself and have it initialized by TinyMce.
I'm getting the following error with this code:
Error: 'mediaPickerEnabled' is undefined
It is occurring in orchard-tinymce.js. Is there another script file that is supposed to be included? Where is mediaPickerEnabled supposed to be defined and set?

Edit: Never mind. I just defined it myself at the head of that file. I'll futz around to see if it's actually supposed to be somewhere else. If you have anything else to contribute to my enlightenment, please don't hesitate.