Setup TinyMce editor in C# MVC 4 - Visual Studio 2012

1

Always get this error:

get: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'tinymce'

By Nuget: PM> Install-Package TinyMCE.MVC.JQuery newest version

Model Class:

using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace Familytree.Models {

  public class TinyMCEModelJQuery {

      [AllowHtml]
      [UIHint("tinymce_jquery_full")]
      public string Content { get; set; }
  }
}

Controller:

using System.Web.Mvc;
namespace Familytree.Controllers {

public class TinyMCESampleJQueryController : Controller {
    //
    // GET: /TinyMCESampleJQuery/
    [ValidateInput(false)]
    public ActionResult Index() {

        return View();

    }
  }
}

View:

 @model Familytree.Models.TinyMCEModelJQuery

 <h2>Index</h2>

 @using (Html.BeginForm())
 {
    <fieldset>
    <legend>TinyMCEModel</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Content)
    </div>
    <div class="editor-field">

        @Html.EditorFor(model => model.Content)
        @Html.ValidationMessageFor(model => model.Content)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
    </fieldset>
 }

tinymce_jquery_full under Shared folder and Editor Template

@*
Don't forget to reference the JQuery Library here, inside your view or layout.
<script src="@Url.Content("~/Scripts/jquery-x.x.x.min.js")" type="text/javascript"></script>
*@

<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>

<script type="text/javascript">

    (function(){ 

      $(function() { 

          $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({

            // Location of TinyMCE script
            script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")',
            theme: "advanced",

            height: "500",
            width: "790",
            verify_html : false,
            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",

            // 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,codehighlighting,netadvimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,

            // Example content CSS (should be your site CSS)
            content_css : "@Url.Content("~/Scripts/tinymce/css/content.css")",
            convert_urls : false,

            // 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"

        });

      });

    })();

</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

Do I change this last line to
@Html.EditorFor(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
Using EditorFor in the Index view
c#
asp.net-mvc-4
asked on Stack Overflow Oct 18, 2013 by user2895447 • edited Jan 29, 2017 by Renan Carlos

2 Answers

0

Your partial view should be something like this

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

<script type="text/javascript">
    (function () {
        tinyMCE.init({
            mode: "exact",
            elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
            theme: "simple",
            height: "300",
            width: "400",
            verify_html: false,
            theme_simple_resizing: true,
            content_css: "@Url.Content("~/Content/Site.css")",
            convert_urls: false
        })
    })();
</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

or change the theme to advanced, anyways when i was doing this i used this https://www.nuget.org/packages/TinyMCE and it was working fine. all you need to do is add [UIHint("tinymce_jquery_full")] before the string definition in your model. i dont see the need for the controller TinyMCESampleJQueryController

Hope this helps

answered on Stack Overflow Nov 22, 2013 by Hakim
0

You can try this, Nothing else

In View Model

 @Html.TextAreaFor(c => c.ColumnName, new { @class = "tinyEditor", @autocomplete = "off" })

In script

<script type="text/javascript">
tinymce.init({
    selector: ".tinyEditor",
    theme: "modern",
    menubar: false,
    width: 400,
    height: 100,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
    ],
    content_css: "/Areas/Admin/Content/lang/en/assets/css/style.css",
    toolbar: "styleselect | bold italic |  bullist numlist outdent indent",
    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' }
    ]
});

JS

https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.6/jquery.tinymce.min.js

It's working do not write the code any other, just use class name in model and tinymce script

answered on Stack Overflow Jun 3, 2019 by Pr0mis PAtel

User contributions licensed under CC BY-SA 3.0