不使用Html帮助程序将TinyMCE编辑器应用于asp中的文本区域

时间:2015-05-18 06:54:10

标签: asp.net tinymce

我正在创建一个asp小工具并尝试将tinymce文本编辑器添加到文本区域。但它并没有出现在编辑器中。因此,添加的代码如下所示,输入字段显示在视图中但不显示编辑器



<script src="JavaScripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JavaScripts/tiny_mce/tiny_mce.js" ></script>
 
<script type="text/javascript">
    // Initialize your tinyMCE Editor with your preferred options
    tinyMCE.init({
        // General options
        mode: "textareas",
        theme: "modern",
        // Theme options
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
 
        // Example content CSS (should be your site CSS)
        content_css: "css/example.css",
    });
    </script>
 
<div class="form">
    <%=Html.Partial("Menu") %><br /><br />
        <% Html.BeginGadgetForm("Update"); %>
        <label for="message">Title :</label>
     <%= Html.TextBox("updatedTitle",Model.Title %>
        <label for="message">Message :</label>
        <%= Html.TextAreaFor("updatedName",x=>x.Message %>
        <input type="hidden" name="id" value="<%= Model.Id %>" />
         <input type="submit" value="Update" />
    <% Html.EndForm(); %>
</div>
&#13;
&#13;
&#13;

文本区域不适用于tinymce编辑器

3 个答案:

答案 0 :(得分:0)

您需要将tinyMCE类和名称添加到文本字段:

TextMode="MultiLine" class="myTextEditor" name="tinymce"

答案 1 :(得分:0)

Don't know if you got this working in the end...but I had tons of trouble getting the tinyMCE working. Followed loads of posts to the letter and no joy. In the end I found a post with a simple example that finally worked. No idea what it was about the particular post that was different but do notice you have mode specifying textareas and this example has selector specifying textarea. Just in case it helps you or anyone else who comes across this the question, the below code is working for me:

<div class="textarea mce-tinymce">
            <script type="text/javascript">
                tinymce.init({ 
                    selector: "textarea",
                    theme: "modern",
                    plugins: [
                        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                        "searchreplace wordcount visualblocks visualchars code fullscreen",
                        "insertdatetime media nonbreaking save table contextmenu directionality",
                        "emoticons template paste textcolor colorpicker textpattern imagetools"
                    ],
                    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                    toolbar2: "print preview media | forecolor backcolor emoticons",
                    image_advtab: true,
                    templates: [
                        { title: 'Test template 1', content: 'Test 1' },
                        { title: 'Test template 2', content: 'Test 2' }
                    ]
                });
            </script>
            @Html.TextAreaFor(model => model.BlogPost)
            @Html.ValidationMessageFor(model => model.BlogPost)
        </div>

答案 2 :(得分:0)

首先确保java链接正确

 <script src="../tiny_mce/tiny_mce.js"></script>

第二次添加新的java项并添加此代码

  tinyMCE.init({
       // General options
       mode: "textareas",
       theme: "advanced",
       plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",

       // Theme options
       theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
       theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
       theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
       theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
       theme_advanced_toolbar_location: "top",
       theme_advanced_toolbar_align: "left",
       theme_advanced_statusbar_location: "bottom",
       theme_advanced_resizing: true,

       // Example word content CSS (should be your site CSS) this one removes paragraph margins
       content_css: "css/word.css",

       // Drop lists for link/image/media/template dialogs
       template_external_list_url: "lists/template_list.js",
       external_link_list_url: "lists/link_list.js",
       external_image_list_url: "lists/image_list.js",
       media_external_list_url: "lists/media_list.js",

       // Replace values for the template plugin
       template_replace_values: {
           username: "me",
           staffid: "991234"
       }
   });

我将此文件命名为TMS

<script src="../tiny_mce/utils/TMS.js"></script>

并添加第一个java链接和第二个链接到您的代码,如此

<script src="../tiny_mce/tiny_mce.js"></script>
<script src="../tiny_mce/utils/TMS.js"></script>

现在我们如何将编辑器添加到文本框中:

<asp:TextBox ID="T25" runat="server" TextMode="MultiLine" Width="532px"></asp:TextBox>

thanx