2012-04-18 7 views
0

ここで見つけたckeditorチュートリアルを使用して、wswgsに変換されたテキスト領域の一部に単語カウント機能を実装しようとしています:http://www.n7studios.co.uk/2010/03/01/ckeditor-word-count-plugin/。このチュートリアルでは、カスタムプラグインを使用してckeditorの単語を数えます。私は正しい単語数を取得しますが、許可された単語の最大数を超えると、色が赤に変わるのを見ることができません。私はckeditorを使用してwswgに変換された後、私のテキスト領域がどのように見えるかを見るために火薬瓶を使用しましたが、私は奇妙なことは何も見ません。ここでckeditorでのプラグインの問題の最大数

<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server"> 
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".cke_editor").ckeditor({ 
      toolbar: 'custom' 
     }); 

    }); 

<div class="form-row form-row-inline"> 
    <%: Html.TextAreaFor(model => model.AssignmentText, new { @name = "table", @class = "cke_editor", @style = "display:none", @onchange = "setDirty(true)" })%> 
    <input name="tableWordCount" type="hidden" value="10" /> 
</div> 

スクリーンされています:

ckeditor with the wordcount plugin

すべてのヘルプは大歓迎ここに私のコードです。

+0

幸運。 CKEditorは長年にわたってバグに悩まされてきました。それは私の背骨の下で震えを送るだけで私の経験について考えている。 TinyMCE(http://www.tinymce.com/)のようなものがあれば、私は別のエディタを試してみることにします。 –

答えて

0

私はついにそれを理解しました。 Html.TextAreaFor() asp.net mvcヘルパーメソッドは、上記の質問コードに示すように、html属性のオブジェクトをパラメータとしてとります。私はもともとtextareaの "name"プロパティを使って、ckeditor word count pluginの "name property"にマッチさせました。代わりに "id"プロパティを使用しなければなりませんでした。

CKEditorバージョンのサンプル:

<html> 
<head> 
    <title>CKEditor Word Count Demonstration</title> 
    <script type="text/javascript" src="jquery/jquery.1.4.min.js"></script> 
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
</head> 

<body> 
    <form action="#" method="POST"> 
     <p> 
      <label for="content">Content with 250 word limit</label> 
      <textarea name="content" class="ckeditor">Lorem Ipsum.</textarea> 
      <input type="hidden" name="contentWordCount" value="250" /> 
     </p> 
    </form> 
</body> 
</html> 

私の新しい固定コード:

<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server"> 
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script> 
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".cke_editor").ckeditor({ 
      toolbar: 'custom' 
     }); 

    }); 

<div class="form-row form-row-inline"> 
    <%: Html.TextAreaFor(model => model.AssignmentText, new { @id = "taxta", @class = "cke_editor", @style = "display:none", @onchange = "setDirty(true)" })%> 
    <input name="taxtaWordCount" type="hidden" value="10" /> 
</div> 

だから、私は変更しなければならなかった唯一のことは、 "ID" プロパティです。私はこれが他人を助けることを望む。やはりFirebugは、html DOMを掘り下げ、ブラウザ上ですべてがどのようにレンダリングされているかを調べるのに非常に役立ちました。

関連する問題