2010-08-22 7 views
1

J'essaie de placer un éditeur de Markdown dans les onglets jQuery-UI, mais l'éditeur n'est pas affiché.Impossible d'imbriquer WMD Markdown Editor dans les onglets JQuery

<% Using Html.BeginForm()%> 
    <div id="AddEventWizard"> 
     <ul> 
      <li><a href="#tabs-1">Event Title</a></li> 
      <li><a href="#tabs-2">Event Description</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <%: Html.LabelFor(Function(model) model.Name)%> 
      <%: Html.TextBoxFor(Function(model) model.Name, New With{.class = "full-width-input"})%> 
      <%: Html.ValidationMessage("Name", "*")%> 
     </div> 
     <div id="tabs-2"> 
      <noscript><h3>Please use 
       <%: Html.ActionLink("Markdown", "Markdown", "About")%> 
       to style your input.</h3></noscript> 
      <div id="wmd-button-bar" class="wmd-panel"> 
      </div> 
      <%: Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})%> 
      <div id="wmd-preview" class="wmd-panel"> 
      </div> 
      <div class="clear"> 
      </div> 
     </div> 
    </div> 
    <% End Using%> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('textarea#wmd-input:not(.processed)').TextAreaResizer(); 

     $("#AddEventWizard").tabs({ 

    }); 
}); // closes document.ready 

</script> 

Il y a de l'espace où les boutons de l'éditeur "devraient" être, mais ils ne sont pas là. Est-ce que quelqu'un sait si les trucs jQuery-UI bloque en quelque sorte WMD Markdown?

Screenshot


Edit:

J'utilise la version de Github

HTML Markup

<form action="/events/addevent" method="post"> 
     <div id="AddEventWizard"> 

      <ul> 
       <li><a href="#tabs-1">Event Title</a></li> 
       <li><a href="#tabs-2">Event Details</a></li> 
       <li><a href="#tabs-3">Event Description</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <label for="Name">Name</label> 

       <input class="full-width-input" id="Name" name="Name" type="text" value="" /> 

      </div> 
      <div id="tabs-2"></div> 
      <div id="tabs-3"> 
       <noscript><h3>Please use 
        <a href="/about/markdown">Markdown</a> 
        to style your input.</h3></noscript> 
       <div id="wmd-button-bar" class="wmd-panel"> 
       </div> 
       <textarea class="wmd-panel" cols="10" id="wmd-input" name="Description" rows="5"> 

</textarea> 
       <div id="wmd-preview" class="wmd-panel"> 
       </div> 
       <div class="clear"> 
       </div> 
      </div> 
     </div> 
     </form> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $('textarea#wmd-input:not(.processed)').TextAreaResizer(); 

     $("#AddEventWizard").tabs({ 

    }); 
}); // closes document.ready 

</script> 
<script src="../../Assets/Scripts/wmd.js" type="text/javascript"></script> 
<script src="../../Assets/Scripts/showdown.js" type="text/javascript"></script> 
<script src="../../Assets/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="../../Assets/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
<script src="../../Assets/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script> 

<script src="../../Assets/Scripts/jquery.textarearesizer.compressed.js" type="text/javascript"></script> 
+0

Quelle version utilisez-vous, l'original de attacklabs ou la communauté éditée par github? Aussi, ce serait bien d'avoir le code HTML généré car je ne crois pas que votre code ASP ait quelque chose à voir avec ça. –

+0

J'ai clarifié ma question. –

+0

J'ai aussi essayé cela avec l'accordéon, et j'ai obtenu les mêmes résultats. –

Répondre

0

Peut-être que vous pouvez lier l'éditeur

$('textarea#wmd-input:not(.processed)').TextAreaResizer(); 

pas sur $ (document) .ready mais sur le clic de tab3? De cette façon, l'éditeur est chargé lorsque la zone de texte est visible.

Questions connexes