在模板中使用CKEditor时会转到textarea

时间:2013-03-18 10:04:22

标签: c# asp.net ckeditor

我正在使用here

中的模板

现在我想在这个模板中使用CKeditor ...我从here下载了 对于asp.net。现在把这个CKeditor放到我的表格中时,它转换成textarea,即没有工具栏...

enter image description here

它应该是这样的 enter image description here

我使用了母版页

子页面代码

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <fieldset>
        <legend>Input Fields</legend>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
            <Triggers>
                <asp:PostBackTrigger ControlID="drplstQuesType" />
            </Triggers>
            <ContentTemplate>
                <div class="row">
                    <label>
                        <strong>Standard</strong>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstStd" runat="server" AppendDataBoundItems="true" Width="500"
                            OnSelectedIndexChanged="drplstStd_SelectedIndexChanged" AutoPostBack="true" CssClass="chzn-done">
                            <asp:ListItem Text="--Select Std--" Selected="True" Value="0"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstStd" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select Standard'
                            InitialValue="0" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div class="row">
                    <label>
                        <strong>Semester</strong>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstSem" runat="server" Width="200" OnSelectedIndexChanged="drplstSem_SelectedIndexChanged"
                            AutoPostBack="true">
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstSem" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select Semester'
                            InitialValue=" --Select Semester-- " SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div class="row">
                    <label>
                        <strong>Subject</strong>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstSub" runat="server" AppendDataBoundItems="true" Width="200"
                            OnSelectedIndexChanged="drplstSub_SelectedIndexChanged" AutoPostBack="true">
                            <asp:ListItem Text="--Select Subject--" Selected="True" Value="0"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstSub" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select Subject'
                            InitialValue="0" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div class="row">
                    <label for="f1_disabled">
                        <strong>Chapter</strong>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstChap" runat="server" Width="200" OnSelectedIndexChanged="drplstChap_SelectedIndexChanged"
                            AutoPostBack="true">
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstChap" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select Chapter'
                            InitialValue=" --Select Chapter-- " SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div class="row">
                    <label for="f1_textarea">
                        <strong>Topic</strong>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstTopic" runat="server" AutoPostBack="true" Width="200">
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstTopic" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select Topic'
                            InitialValue=" --Select Topic-- " SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
                <div class="row">
                    <label for="f1_textarea_grow">
                        <strong>Question Type</strong>
                        <%--    <small>with autogrow</small>--%>
                    </label>
                    <div>
                        <asp:DropDownList ID="drplstQuesType" runat="server" Width="200" AutoPostBack="true"
                            OnSelectedIndexChanged="drplstQuesType_SelectedIndexChanged">
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ForeColor="#A7474B"
                            Font-Bold="True" ControlToValidate="drplstQuesType" ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Select QuestionType'
                            InitialValue=" --Select QuestionType-- " SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div class="row">
            <label for="f3_date">
                <strong>Question</strong>
            </label>
            <div>
                <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="100px" Width="650px"></CKEditor:CKEditorControl>
                <br />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="CKEditorControl1"
                    ErrorMessage='<img src="img/elements/forms/icon-error.png"/>Enter Question' SetFocusOnError="true"
                    Display="Dynamic" ForeColor="#A7474B" Font-Bold="True"></asp:RequiredFieldValidator>
            </div>
        </div>
        <div class="row">
            <label for="f3_date">
                <strong>Option-1</strong>
            </label>
            <div>
                <asp:TextBox ID="txtOption1" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f3_date">
                <strong>Option-2</strong>
            </label>
            <div>
                <%--<input type="date" name="f3_date" id="f3_date" />--%>
                <asp:TextBox ID="txtOption2" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f1_textarea">
                <strong>Option-3</strong>
            </label>
            <div>
                <asp:TextBox ID="txtOption3" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f3_date">
                <strong>Option-4</strong>
            </label>
            <div>
                <asp:TextBox ID="txtOption4" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f3_date">
                <strong>Option-5</strong>
            </label>
            <div>
                <%--<input type="date" name="f3_date" id="f3_date" />--%>
                <asp:TextBox ID="txtOption5" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f1_textarea">
                <strong>Option-6</strong>
            </label>
            <div>
                <asp:TextBox ID="txtOption6" runat="server" Width="500px"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <label for="f1_textarea">
                <strong>UploadFile</strong>
            </label>
            <div>
                <asp:FileUpload ID="FileUpload1" runat="server" Width="283px" />&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label
                    ID="Label1" runat="server" Text=""></asp:Label>
            </div>
        </div>
        <div class="row">
            <label for="f1_textarea">
                <strong>Correct Answer</strong>
            </label>
            <div>
                <asp:Panel ID="Panel2" runat="server">
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                        <asp:ListItem Value="1" Text="option-1"></asp:ListItem>
                        <asp:ListItem Value="2" Text="option-2"></asp:ListItem>
                        <asp:ListItem Value="3" Text="option-3"></asp:ListItem>
                        <asp:ListItem Value="4" Text="option-4"></asp:ListItem>
                        <asp:ListItem Value="5" Text="option-5"></asp:ListItem>
                        <asp:ListItem Value="6" Text="option-6"></asp:ListItem>
                    </asp:CheckBoxList>
                    <br />
                    <asp:DropDownList ID="DropDownList1" runat="server">
                        <asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
                        <asp:ListItem Value="1" Text="option-1"></asp:ListItem>
                        <asp:ListItem Value="2" Text="option-2"></asp:ListItem>
                        <asp:ListItem Value="3" Text="option-3"></asp:ListItem>
                        <asp:ListItem Value="4" Text="option-4"></asp:ListItem>
                        <asp:ListItem Value="5" Text="option-5"></asp:ListItem>
                        <asp:ListItem Value="6" Text="option-6"></asp:ListItem>
                    </asp:DropDownList>
                    <br />
                    <br />
                    <asp:TextBox ID="txtCorrectAns" runat="server" Width="200"></asp:TextBox>
                </asp:Panel>
            </div>
        </div>
        <div class="row">
            <label for="f1_textarea">
                <strong>Remarks</strong>
            </label>
            <div>
                <asp:TextBox ID="txtRemarks" runat="server" Rows="5" TextMode="MultiLine"></asp:TextBox>
            </div>
        </div>
        <div class="actions">
            <div class="left">
                <asp:Button ID="btnView" runat="server" Text="View details" CausesValidation="false"
                    OnClick="btnView_Click"></asp:Button>
                <input type="reset" value="Cancel" runat="server" id="Cancel" onclick="btnCancel_Click" />
            </div>
            <div class="right">
                <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
            </div>
        </div>
    </fieldset>
</asp:Content>

请给出建议,以便我可以使用带有工具栏的编辑器

1 个答案:

答案 0 :(得分:1)

此问题是由于CKeditor未正确加载。

原因可能是2:

  • 您没有包含正确的CKEditor 3.x javascript文件,或者它们不在正确的位置(〜\ Ckeditor)

  • 有一个javascript错误打破了javascripts的加载

无论如何,当你遇到与javascript相关的问题时,你必须查看浏览器开发者控制台是否有任何javascript错误。

CKEditor for ASP.NET Control Integration Guide