set html content to TinyMCE editor content in ASP.NET MVC

Question

I have following controller method

    public ActionResult tinymce_editor()
    {
        return View();
    }

Then I want to load some html content to TinyMCE editor content

this is the html content I want to load

<div>
   <img src='http://localhost/Content/sam.jpg' />
       <div>Image Title</div>
</div>

According to the documentation I followed this setContent method

And tried to set content using like this

Approach 1

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools",
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

var data = "<div><img src='http://localhost/Content/sam.jpg' /><div>Image Title</div></div> html";
 tinyMCE.activeEditor.setContent(data, { format: 'raw' });

    </script>
</head>
<body>
    <h1>TinyMCE Getting Started Guide</h1>
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</body>
</html>

and then like this

(insert the html content to a html file then load myhtml.html file using jquery)

Approach 2

<html>
<head>
    <script type="text/javascript" src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools"        
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

$.get("myhtml.html", function (content) {
    // if you have one tinyMCE box on the page:
    tinyMCE.activeEditor.setContent(content);
});

    </script>
</head>
<body>
    <h1>TinyMCE Getting Started Guide</h1>
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</body>
</html>

but none of above approach not working , what should I do to correct this

@teovankot this is the error I'm getting on console s29.postimg.org/l4ktm37pj/qwert.jpg — kez

DavidGr. DavidGr. · Accepted Answer · 2016-11-24T18:28:47

you have to wait until tinyMCE loaded succesfully. Do it like this:

<script>
        appendTinyMCE();
        function appendTinyMCE() {
            tinymce.init({
                selector: '#selector',
                init_instance_
                    callback: function () { tinyMCE.activeEditor.setContent('content'); }
            });
        };    
    </script>

set html content to TinyMCE editor content in ASP.NET MVC

1 Answers