integracja tinymce z asp .net MVC 4.0

Question

przy użyciu ASP .NET MVC 4.0, VS2012.

Na jednej z moich stron próbowałem zintegrować edytor WYSIWYG "TinyMCE". Aby zintegrować, Śledziłem następujący adres URL: .tugberkugurlu.com

moją stronę widok jest jak:

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

Oto moja model jest jak:

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

} 

Moi około strona ładuje się ze wszystkimi cechy.

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

również ładuje się dobrze. ale nie ma panelu "WYSIWYG" (nie wiem, jak się nazywa, panel jest używany do edycji mojego tekstu zapisanego w textarea (HTml.editorFor())) jest załadowany. W środowisku wykonawczym wyjątek jest zgłaszany w plikujquery.tinymce.js.

Komunikat o błędzie:

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

I daj mi dwie opcje, dalej lub Przerwa. Jeśli kontynuuję, strona ładuje się z funkcjami, o czym wspomniałem wcześniej. Jeśli się rozbiję, pozostanie on w pliku jquery.tinymce.js z żółtym tłem tekstowym.

Nie mam doświadczenia z JavaScript/jquery. I nowe w ASP .NET MVC 4.0, tak naprawdę jest to moja pierwsza próba aplikacji internetowej w .net.

Zaktualizowałem jquery z nuGet. Jakie mogą być możliwe sposoby rozwiązania tego problemu?

Answer 1

Przy łączeniu URL i ścieżek skryptów

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

Sugeruje to, że jquery.tinymce.js powinien znajdować się w /Home/About/Scripts/tinymce/jquery.tinymce.js. Zakładam, że jest niepoprawny. Spróbuj zmienić ścieżkę skryptu do

<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> 
//or 
<script src="~/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> 

Answer 2

pierwszej tego wszystkiego jest dwa te same pliki jquery (ale min - wersja minificated):

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

sekund: po prostu pójść na dno _Layout i dodać:

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

trzeci: na widoku s/Shared/EditorTemplates/tinymce_jquery_full.cshtml usunąć

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

Daj mi proszę znać, jeśli to pomaga.

Jarosław

Answer 3

trzeba użyć "@ html.Raw (model => model.content)"

Answer 4

W MVC3 wszystko idzie w porządku .. ale w MVC4 nie. (dla mnie przynajmniej ..)

W końcu udało mi się.

W _Layout.cshtml musiałem przenieść dolne linie:

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

do góry (wewnątrz tagów głowie), przed liniami:

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

i pozostawić:

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

w pliku tinymce_jquery_full.cshtml EditorTemplate.

Teraz działa dobrze jak w MVC3 :) nadzieja, że ​​mogłem pomóc.

Answer 5

Ta strona wymaga aktualizacji. Tinymce jest teraz bardzo łatwe do włączenia w prawie wszystko, a MVC4 nie jest inaczej.

umieścić w nagłówku dokumentu _layout adres podany przez TinyMCE i jedna linia skryptu, aby wskazać, że chcesz na to, aby zmienić pola tekstowego:

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

Wszystko co musisz zrobić, następnie upewnij się, że renderujesz pole tekstowe na formularzu, a zamiast niego wyświetli się Tinymce.

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

Jeśli witryna w tinymce.cachefly.net jest w dół, jednak, to znaczy, że nikt nie będzie w stanie korzystać z interfejsu TinyMCE chociaż.

Answer 6

Możesz dodać adnotacje danych do samego modelu, aby poinformować go o użyciu tinymce. Oto przykład pełnego edytora tekstu formatowanego.

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

Pamiętaj, że robienie tego w ten sposób zawsze spowoduje, że model ten będzie renderował edytor tekstu sformatowanego do nowych lub edytowanych operacji. więc musisz mieć odpowiednie odniesienia do skryptów na tych widokach.

Potrzebny będzie również odpowiedni using w modelu za korzystanie System.ComponentModel.DataAnnotations.