javascript - 将 tinymce 与 asp .net MVC 4.0 集成

Question

使用ASP .NET MVC 4.0，VS2012。

在我的一个页面中，我尝试集成一个所见即所得的编辑器“ TinyMCE ”。为了整合，我遵循了以下 URL：.tugberkugurlu.com

我的视图页面是这样的：

@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>
}

这里我的模型是这样的：

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; }

}

我的关于页面加载了所有功能。

"@html.EditorFor(model=>model.content)"

加载也很好。但是没有加载“所见即所得”窗格（我不知道它叫什么，该窗格用于编辑我在 textarea 中写入的文本（HTml.editorFor())）。在运行时，在jquery.tinymce.js文件中抛出异常。

错误信息 ：

`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`

并给我两个选择，Continue或Break。如果我继续，页面会加载我前面提到的功能。如果我中断，那么它会保留在带有黄色文本背景的jquery.tinymce.js文件中。

我没有使用 Javascript/jquery 的经验。ASP .NET MVC 4.0 中的新功能，实际上这是我在 .net 中第一次尝试 Web 应用程序。

我从 nuGet 更新了 jquery。有什么可能的方法来解决它？

Answer 1

此页面需要更新。Tinymce 现在很容易融入到几乎任何东西中，MVC4 也不例外。

您将 Tinymce 提供的地址和一行脚本放入 _layout 文档的头部，以表明您希望它更改文本框：

@Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js")
<script>
    tinymce.init({ selector: 'textarea' });
</script>

然后，您要做的就是确保在表单上呈现一个文本框，然后它将显示 Tinymce。

[AllowHtml]
[DataType(DataType.MultilineText)]
public string YourInputText { get; set; }

但是，如果 tinymce.cachefly.net 上的站点已关闭，那么这确实意味着没有人能够使用 tinymce 界面。

Answer 2

首先这是两个相同的 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>

第二：只需转到 _Layout 底部并添加：

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        <script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>

第三：在 Views/Shared/EditorTemplates/tinymce_jquery_full.cshtml 上删除

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

让我知道这是否对您有帮助。

雅罗斯拉夫

Answer 3

结合 url 和脚本路径时

http://localhost:1706/Home/About
<script src="Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>

这表明 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>

Answer 4

在 MVC3 中一切正常.. 但在 MVC4 中却没有。（至少对我来说..）

最后我让它工作了。

在 _Layout.cshtml 我不得不移动底线：

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

到顶部（在 head 标签内），在以下行之前：

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

并留下：

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

在 EditorTemplate tinymce_jquery_full.cshtml 文件中。

现在它像在 MVC3 中一样工作正常 :) 希望我能提供帮助。

Answer 5

您可以在模型本身上添加数据注释以告诉它使用 tinymce。这是完整富文本编辑器的示例。

[Display(Name = "Condition"), UIHint("tinymce_jquery_full"), AllowHtml]
public string ExampleCondition { get; set; }

请记住，这样做将始终使此模型呈现富文本编辑器以进行新的或编辑操作。所以你需要在这些视图上有正确的脚本引用。

您还需要在模型中使用正确的 using 语句来使用 System.ComponentModel.DataAnnotations。

Answer 6

你必须使用“@html.Raw(model=>model.content)”