integrazione di tinymce con asp .net MVC 4.0

Question

utilizzando ASP .NET MVC 4.0, VS2012.

In una delle mie pagine, ho provato ad integrare un editor WYSIWYG "TinyMCE". Per integrare, ho seguito il seguente URL: .tugberkugurlu.com

La mia pagina vista è come:

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

Qui il mio modello è come:

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 caricamento della pagina con tutti i Caratteristiche.

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

carica anche bene. ma nessun riquadro "WYSIWYG" (non mi chiamo come viene chiamato, il riquadro viene usato per modificare il mio testo scritto nella textarea (HTml.editorFor())) viene caricato. Nel runtime, Eccezione viene generata nel file jquery.tinymce.js.

messaggio di errore:

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

E dammi due opzioni, Continua o Pausa. Se continuo, la pagina viene caricata con le funzionalità come accennato in precedenza. Se si interrompe, rimane nel file jquery.tinymce.js con uno sfondo testo giallo.

Non ho esperienza con Javascript/jquery. E nuovo in ASP .NET MVC 4.0, in realtà questo è il mio primo tentativo di applicazione web in .net.

Ho aggiornato jquery da nuGet. Quali potrebbero essere i possibili modi per risolverlo?

Answer 1

Quando si combinano l'URL ei percorsi di script

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

Ciò suggerisce che il jquery.tinymce.js devono trovarsi in /Home/About/Scripts/tinymce/jquery.tinymce.js. Questo presumo non è corretto. Provare a cambiare il percorso dello script di

<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

prima di tutto questo è due file stessi jQuery (ma min - versione 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> 

secondo: basta andare al fondo _Layout e aggiungere:

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

terzo: su Visualizza s/comune/EditorTemplates/tinymce_jquery_full.cshtml rimuovere

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

Let me per favore sapere se questo ti aiuta.

Yaroslav

Answer 3

devi usare "@ html.Raw (modello => model.content)"

Answer 4

In MVC3 tutto va bene .. ma in MVC4 non è così. (almeno per me ..)

Finalmente ho funzionato.

In _Layout.cshtml ho dovuto spostare le linee di fondo:

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

per la parte superiore (all'interno del tag head), prima che le linee:

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

e lasciare il:

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

nel file editorTemplate tinymce_jquery_full.cshtml.

Ora funziona come in MVC3 :) Spero di poterti aiutare.

Answer 5

Questa pagina richiede un aggiornamento. Tinymce è ora molto facile da incorporare praticamente in qualsiasi cosa e MVC4 non è diverso.

si posiziona nella testa del documento _layout all'indirizzo fornito dal TinyMCE e quella riga di script per indicare che si desidera per esso di modificare la casella di testo:

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

Tutto quello che dovete fare, allora è assicurarsi di eseguire il rendering di una casella di testo sul modulo e visualizzerà invece Tinymce.

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

Se il sito in tinymce.cachefly.net è giù, però, allora vuol dire che nessuno sarebbe in grado di utilizzare l'interfaccia TinyMCE però.

Answer 6

È possibile aggiungere annotazioni di dati sul modello stesso per dirgli di usare tinymce. Ecco un esempio dell'editor di testo completo completo.

Ricordarsi di farlo in questo modo renderà sempre questo modello il rendering del rich text editor per le operazioni di modifica o di nuova creazione. quindi avrai bisogno di avere i riferimenti di script appropriati su quelle viste.

Avrete anche bisogno di un'istruzione using corretta nel vostro modello per l'utilizzo di System.ComponentModel.DataAnnotations.