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