|
1. Download the editor from this page: http://www.tinymce.com/download/download.php
This example is running with version TinyMCE 3.5.8 (the vesrion TinyMCE 4.0b1
found to have broken links itself!). Place this JS to Script folder of your
MVC project. For instance, I placed it to ~/Scripts/JSScripts/TinyMCEEditor/.
To add it in pretty nice fashion, create the tinymce directory somewhere
out of the VS, and drag and drop it into Solution Explorer. The VS
automatically will create folders files in both solution explorer and
physical files in Solution’s directory.
2. Add this script to your viewer. This script initialize the editor. The
red text should be replaced with the exact file name of the js file of the
editor.
<script type="text/javascript" src="~/Scripts/JSScripts/TinyMCEEditor/tiny_mce_src.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins:
"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
setup: function (ed) {
ed.onKeyPress.add(
function (ed, evt) {
}
);
}, // Theme options
theme_advanced_buttons1:
"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2:
"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3:
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4:
"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location:
"top",
theme_advanced_toolbar_align:
"left",
theme_advanced_statusbar_location:
"bottom",
theme_advanced_resizing: true,
// Example content CSS (should be
your site CSS)
content_css:
"css/content.css",
// Drop lists for
link/image/media/template dialogs
template_external_list_url:
"lists/template_list.js",
external_link_list_url:
"lists/link_list.js",
external_image_list_url:
"lists/image_list.js",
media_external_list_url:
"lists/media_list.js",
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span',
styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1',
styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span',
classes: 'example1' },
{ title: 'Example 2', inline: 'span',
classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector:
'tr', classes: 'tablerow1' }
],
// Replace values for the template
plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
</script>
3. Call the editor via textarea element. Instead of the helper, write the html
code by your self ("Description" is the name of the field)
remove this:
@Html.EditorFor(model => model.Description)
with this: @Html.TextAreaFor(model =>
model.Description)
or with this: <textarea
id="Description" name="Description" rows="15"
cols="50" style="width: 80%"
runat="server">@Html.Raw(Model.Description)</textarea>
4. Update your MVC model to allow html scripts
from the Viewer. Add
the attribute [AllowHtml] to your Model's attribute, to avoid
validation html form error request. Use using
System.Web.Mvc;
5 . To Show the value as Html rich format, use the HTML.Raw helper as
above
@Html.Raw(item.Description)
|
