2013-01-13 20 views
8

एएसपी .NET एमवीसी 4.0, वीएस2012 का उपयोग कर टिनिमस को एकीकृत करना।एएसपीनेट एमवीसी 4.0

मेरे पृष्ठ में से एक में, मैंने एक WYSIWYG संपादक "TinyMCE" को एकीकृत करने का प्रयास किया। एकीकृत करने के लिए, मैं निम्नलिखित URL पर गए: .tugberkugurlu.com

मेरे दृश्य पेज की तरह है:

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

} 

मेरे सभी के साथ पृष्ठ लोड के बारे में:

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

यहाँ मेरी मॉडल की तरह है विशेषताएं।

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

भी ठीक लोड करता है। लेकिन कोई "WYSIWYG" फलक नहीं है (मुझे यह नहीं पता कि इसे क्या कहा जाता है, फलक को टेक्स्टरेरा (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` 

और मेरे पास दो विकल्प देते हैं, जारी या तोड़। यदि मैं जारी रखता हूं, तो पृष्ठ पहले से उल्लिखित सुविधाओं के साथ लोड होता है। यदि मैं तोड़ता हूं, तो यह jquery.tinymce.js फ़ाइल पीले रंग की पृष्ठभूमि के साथ रहता है।

मुझे जावास्क्रिप्ट/jquery के साथ कोई अनुभव नहीं है। और एएसपी .NET एमवीसी 4.0 में नया, वास्तव में यह .NET में वेब अनुप्रयोग का पहला प्रयास है।

मैंने nuGet से jquery अपडेट किया। इसे हल करने के संभावित तरीके क्या हो सकते हैं?

उत्तर

1

जब यूआरएल और स्क्रिप्ट पथ

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

संभावित तरीकों से बदलते पथ काम नहीं किया। –

3

पहले यह सब के लिए स्क्रिप्ट पथ बदलने की कोशिश दो ही jQuery फ़ाइलें (लेकिन मिनट - 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> 

दूसरा: सिर्फ _Layout नीचे करने के लिए जाना और जोड़ें:

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

तीसरे: देखें पर एस/साझा/EditorTemplates/tinymce_jquery_full.cshtml हटाने

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

मुझे पता है कृपया अगर यह आपकी मदद करता है।

यारोस्लाव

+0

भी mvc4 पर आप @ Url.Content –

+0

धन्यवाद आपके उत्तर के लिए निकाल सकते हैं और बस का उपयोग

-1

आप का उपयोग करने के लिए "@ html.Raw (मॉडल => model.content)" है

+1

क्या आप शायद इस उत्तर पर विस्तार कर सकते हैं? –

1

MVC3 में सब ठीक हो जाता है .. लेकिन MVC4 में ऐसा नहीं है। (मेरे लिए कम से कम ..)

अंत में मैं यह काम कर रहा मिला है। लाइनों से पहले, शीर्ष करने के लिए

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

(सिर टैग के अंदर):

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

और छोड़:

_Layout.cshtml में मैं नीचे लाइनों को स्थानांतरित करने के लिए किया था

<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script> 
EditorTemplate tinymce_jquery_full.cshtml फ़ाइल में

अब यह ठीक MVC3 में की तरह काम करता :) आशा मैं मदद कर सकता है।

11

इस पृष्ठ को एक अद्यतन की आवश्यकता है। टिनिमस अब बहुत कुछ भी शामिल करने में बहुत आसान है और एमवीसी 4 अलग नहीं है।

आप _layout दस्तावेज़ के सिर में जगह TinyMCE द्वारा प्रदान पता और स्क्रिप्ट की एक पंक्ति से संकेत मिलता है कि आप इसे पाठ बॉक्स को बदलने के लिए के लिए चाहते हैं कि:

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

तुम सब तो क्या करना है यह सुनिश्चित कर लें कि आप फॉर्म पर टेक्स्टबॉक्स प्रस्तुत करें और इसके बजाय यह टिनिमस प्रदर्शित करेगा।

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

तो tinymce.cachefly.net पर साइट नीचे है, तथापि, तो इसका मतलब यह है कि कोई भी हालांकि TinyMCE इंटरफेस का उपयोग करने में सक्षम होगा।

+0

धन्यवाद, यह मेरे लिए काम करता है, लेकिन मुझे संपादक को अधिक विकल्प के साथ चाहिए कि मैं इसे कैसे बदल सकता हूं? –

0

आप TinyMCE उपयोग करने के लिए यह बताने के लिए मॉडल पर ही डेटा एनोटेशन जोड़ सकते हैं। यहां पूर्ण समृद्ध टेक्स्ट एडिटर का एक उदाहरण दिया गया है।

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

ध्यान रखें यह इस तरह से हमेशा के लिए इस मॉडल को नए या संपादन के संचालन के लिए रिच टेक्स्ट संपादक प्रस्तुत करना कर देगा कर। इसलिए आपको उन विचारों पर उचित स्क्रिप्ट संदर्भों की आवश्यकता होगी।

तुम भी System.ComponentModel.DataAnnotations प्रयोग करने के लिए अपने मॉडल में एक उचित उपयोग करते हुए बयान की आवश्यकता होगी।