javascript 将 tinymce 与 asp .net MVC 4.0 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14302131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
integrating tinymce with asp .net MVC 4.0
提问by Cheesus Toast
using ASP .NET MVC 4.0, VS2012.
使用ASP .NET MVC 4.0，VS2012。
In one of my page, I tried to integrate a WYSIWYG editor "TinyMCE". To integrate, I followed the following URL : .tugberkugurlu.com
在我的一个页面中，我尝试集成一个 WYSIWYG 编辑器“ TinyMCE”。为了集成，我遵循以下 URL：.tugberkugurlu.com
My view pageis like :
我的查看页面是这样的：
@model AboutModels
@using FileUploadDemo.Models
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
@{
ViewBag.Title = "About";
}
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>About</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.PostedOn)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PostedOn)
@Html.ValidationMessageFor(model => model.PostedOn)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Tags)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Tags)
@Html.ValidationMessageFor(model => model.Tags)
</div>
<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>
<p>
Posted Content : @ViewBag.HtmlContent
</p>
</fieldset>
}
Here my Modelis like :
这里我的模型是这样的：
public class AboutModels
{
public string Title { get; set; }
public DateTime PostedOn { get; set; }
public string Tags { get; set; }
[UIHint("tinymce_jquery_full"), AllowHtml]
public string Content { get; set; }
}
My about page loads with all features.
我的关于页面加载了所有功能。
"@html.EditorFor(model=>model.content)"
also loads fine. but no "WYSIWYG" pane(i donno what it is called, the pane is used to edit my text written in the textarea(HTml.editorFor())) is loaded. In the runtime, Exception is thrown in jquery.tinymce.jsfile.
也很好加载。但没有加载“所见即所得”窗格（我不知道它叫什么，该窗格用于编辑我在 textarea(HTml.editorFor()) 中编写的文本）。在运行时，在jquery.tinymce.js文件中抛出异常。
Error Message :
错误信息 ：
`Unhandled exception at line 86, column 11 in http://localhost:1706/Home/About
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method`
And give me two options, Continueor Break. If i continue, the page loads with features as i mentioned earlier. If i Break, then it stays in the jquery.tinymce.jsfile with a yellow text-background.
并给我两个选择，Continue或Break。如果我继续，页面会加载我之前提到的功能。如果我中断，那么它会保留在带有黄色文本背景的jquery.tinymce.js文件中。
I have no experience with Javascript/jquery. And new in ASP .NET MVC 4.0, actually this is my first try of web application in .net.
我没有使用 Javascript/jquery 的经验。ASP .NET MVC 4.0 中的新功能，实际上这是我第一次尝试在 .net 中使用 Web 应用程序。
I updated jquery from nuGet. What could be the possible ways to solve it?
我从 nuGet 更新了 jquery。解决它的可能方法是什么？
回答by Cheesus Toast
This page requires an update. Tinymce is now very easy to incorporate into pretty much anything and MVC4 is no different.
此页面需要更新。Tinymce 现在很容易整合到几乎任何东西中，MVC4 也不例外。
You place into the head of the _layout document the address provided by Tinymce and the one line of script to indicate that you wish for it to alter the text box:
您将 Tinymce 提供的地址和一行脚本放入 _layout 文档的头部，以表明您希望它更改文本框：
@Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js")
<script>
tinymce.init({ selector: 'textarea' });
</script>
All you have to do then is make sure that you render a textbox on the form and it will display Tinymce instead.
然后你要做的就是确保在表单上呈现一个文本框，它会显示 Tinymce。
[AllowHtml]
[DataType(DataType.MultilineText)]
public string YourInputText { get; set; }
If the site at tinymce.cachefly.net is down, however, then it does mean that no one would be able to use the tinymce interface though.
然而，如果 tinymce.cachefly.net 的站点关闭，那么这确实意味着没有人能够使用 tinymce 界面。
回答by Yaroslav Bigus
firstof all this is two same jquery files (but min - minificated version):
首先，这是两个相同的 jquery 文件（但最小 - 缩小版本）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
second: just go to the _Layout bottom and add:
第二：只需转到 _Layout 底部并添加：
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
third: on Views/Shared/EditorTemplates/tinymce_jquery_full.cshtml remove
第三：在 Views/Shared/EditorTemplates/tinymce_jquery_full.cshtml 上删除
<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
Let me please know if this helps you.
如果这对您有帮助，请告诉我。
Yaroslav
雅罗斯拉夫
回答by Eric Herlitz
When combining the url and the script paths
结合 url 和脚本路径时
http://localhost:1706/Home/About
<script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
This suggests that the jquery.tinymce.js should be located in /Home/About/Scripts/tinymce/jquery.tinymce.js. This I assume is incorrect. Try to change the script path to
这表明 jquery.tinymce.js 应该位于 /Home/About/Scripts/tinymce/jquery.tinymce.js 中。我认为这是不正确的。尝试将脚本路径更改为
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
//or
<script src="~/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
回答by Marcio Cardoso
In MVC3 all goes fine.. but in MVC4 it doesn't. (for me at least..)
在 MVC3 中一切正常……但在 MVC4 中却没有。（至少对我来说..）
Finally i got it working.
最后我让它工作了。
In _Layout.cshtml I had to move the bottom lines:
在 _Layout.cshtml 中，我不得不移动底线：
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
to the top (inside the head tags), before the lines:
到顶部（在 head 标签内），在行之前：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
and leave the:
并离开：
<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
in the EditorTemplate tinymce_jquery_full.cshtml file.
在 EditorTemplate tinymce_jquery_full.cshtml 文件中。
Now it works fine like in MVC3 :) Hope I could help.
现在它像在 MVC3 中一样工作正常 :) 希望我能帮上忙。
回答by Mike
You can add data annotation on the model itself to tell it to use tinymce. Here is an example of the full rich text editor.
您可以在模型本身上添加数据注释以告诉它使用 tinymce。下面是一个完整的富文本编辑器的例子。
[Display(Name = "Condition"), UIHint("tinymce_jquery_full"), AllowHtml]
public string ExampleCondition { get; set; }
Keep in mind doing it this way will always make this model render the rich text editor for new or editing operations. so you will need to have the proper script references on those views.
请记住，这样做将始终使此模型为新的或编辑操作呈现富文本编辑器。所以你需要对这些视图有正确的脚本引用。
You will also need a proper using statement in your model for using System.ComponentModel.DataAnnotations.
您还需要在模型中使用正确的 using 语句来使用 System.ComponentModel.DataAnnotations。
回答by Mustafa ?zgüner
you have to use "@html.Raw(model=>model.content)"
你必须使用“@html.Raw(model=>model.content)”
