2015-10-26 101 views
0

我有以下控制器的方法組HTML內容的ASP.NET MVC TinyMCE的編輯內容

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

然後我想加載一些HTML內容TinyMCE的編輯內容

這是HTML內容我想加載

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

根據文檔我跟着此 setContent方法

並試圖設置內容使用這樣

方法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> 

然後這樣

(插入HTML內容到一個HTML文件,然後裝入myhtml.html使用jquery的文件)

方法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> 

但沒有上述方法不靈,我應該怎麼做才能解決這個

+0

瀏覽器控制檯中的任何錯誤? –

+0

@teovankot這是我在控制檯上的錯誤http://s29.postimg.org/l4ktm37pj/qwert.jpg – kez

回答

0

你必須要等到tinyMCE的加載成功地。 是這樣的:

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