CKEditor-related issue

Question

CKEditor-related issue

Peter_1985 2,736

Hi,

addMore event below does not fire expectedly. Can it be related to the version CKEditor?

Accepted answer

3 additional answers

Your answer

Answer 1

Hi @Peter_1985

<%@ Page Title="相关资料" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Chat0._Default" ValidateRequest="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>相关资料</title>
    <!--link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /-->
    <link rel="shortcut icon" type="image/x-icon" href="house_one.png" />
    <!--link rel="shortcut icon" type="image/png" href="house_one.png" /-->
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=474OwxLkambWRwf8oWjOOECwD5j0ntj5"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="JavaScript1.js">
    </script>
    <script language="C#" runat="server">
        private void clickMe(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(1); upd_pict_rec_id(2);
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup();", true);
        }
        private void clickNo(object sender, EventArgs e)
        {

            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup();", true);
        }
        private void clickMe2(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(2); upd_pict_rec_id(3);
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup2();", true);
        }
        private void clickNo2(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup2();", true);
        }
        private void clickMe3(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(3); upd_pict_rec_id(4);
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup3();", true);
        }
        private void clickNo3(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup3();", true);
        }
        private void clickMe4(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(4); upd_pict_rec_id(5);
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup4();", true);
        }
        private void clickNo4(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup4();", true);
        }
        private void clickMe5(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(5); upd_pict_rec_id(6);
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup5();", true);
        }
        private void clickNo5(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup5();", true);
        }
        private void clickMe6(object sender, EventArgs e)
        {
            //p1_Click(); remove_rec(6); 
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup6();", true);
        }
        private void clickNo6(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "ClosePopup", "closePopup6();", true);
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            // 百度地图API功能
            var map = new BMap.Map("allmap");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
            map.setCurrentCity("深圳");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        });
    </script>

</head>
<body style="background-color: #C5C4CC;">
    <form id="form1" runat="server" autocomplete="off">
        <div>
            <table width="100%" align="right">
                <!--tr>
             <td align="right" style="background-color:#0A2757;height:1px;font-size:1px;">&nbsp;</td>
        </tr-->
            </table>
        </div>
        <br />
        <br />
        <div class="right up" />
        <asp:Label ID="Label1"
            Text="登记资料"
            Width="500px"
            Font-Names="標楷體"
            Font-Size="16pt"
            Font-Bold="true"
            ForeColor="Black"
            runat="server" />
        <br />
        <br />
        <br />
        <asp:Label ID="Label4"
            Text="谈话内容"
            Width="150px"
            Font-Names="標楷體"
            Font-Size="14pt"
            Font-Bold="true"
            ForeColor="Black"
            runat="server" />
        <script type="text/javascript" src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

        <div id="dvDesc">
            <asp:Repeater ID="rptDesc" runat="server">
                <ItemTemplate>
                    <table class="tblDesc" cellpadding="2" cellspacing="0" border="1">
                        <tr>
                            <td>
                                <b>
                                    <u>
                                        <span class="cDesc"><%# Eval("cDesc") %></span>
                                    </u>
                                </b>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div>
           <p id="CommentList" style="  list-style-position: inside;
padding-left: 0;">
             <li >评论 1:<br /><textarea id="Comment1" name="MyEA" runat="server" placeholder="Enter your Comment here ..."
        style="width: 250px;height: 100px;"></textarea></li>
          </p>
      </div>
      <script>
          ClassicEditor
              .create(document.querySelector('#Comment1'))
              .catch(error => {
                  console.error(error);
              });
      </script>
        <input type="button" name="Button1" value="新评论" id="addMore" class="forbutton" style="width: 140px;">
        <script type="text/javascript">
           

            var i = 1;
            $(document).ready(function () {
                //$('textarea[id*="currentComment"]').each(function () {
                //$('textarea[id*="Comment"]').each(function () {
               
                $("#addMore").click(function (e) {
                    i++;
                    $("#CommentList").append("<div id='editor" + i + "'></div>");
                    ClassicEditor
                        .create(document.querySelector('#editor'+i))
                        .catch(error => {
                            console.error(error);
                        });

                });
            });

            function CKEditorChange(name) {
                CKEDITOR.replace(name);
            }
        </script>
        <br />
        <br />
        <div id="allmap" style="width: 1150px; height: 320px; border: 2px double red; display: block"></div>
        <asp:Label runat="server" ID="lb_msg" Font-Size="Large" ForeColor="#E01B84" />
        <br />
        <br />
        <asp:Button ID="btnSave" type="button" runat="server" Width="140px" Text="储存" CssClass="forbutton" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" type="button" runat="server" Width="140px" Text="取消" CssClass="forbutton" OnClick="btnCancel_Click" Visible="false" />
        <asp:Button ID="bt_temp" runat="server" Text="Call Button Click" Style="display: none" OnClick="pict_click6" />
        <br />
        <br />
    </form>
    <asp:Label ID="lb_msg2"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict1"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict2"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict3"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict4"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict5"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_pict6"
        CssClass="dia"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <button id="btnFind" style="visibility: hidden;">Find my location</button>
    <asp:Label ID="lb_var1"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_var2"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_var3"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_user_id"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_c_id"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_readonly"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
    <asp:Label ID="lb_house_id"
        Width="165px"
        Visible="false"
        Font-Names="標楷體"
        Font-Size="11pt"
        Font-Bold="true"
        ForeColor="Black"
        runat="server" />
</body>
</html>

Case3

Best Regards

Qi You

Answer 2

Hi @Peter_1985

It's a matter of version. Version 4.23 I can't even use js files.

I recommend you download version 4.8. The current version 4.23 has bugs. Version 4.8 is the best version in my opinion.

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Peter_1985 2,736

Do you have the exact URL to get the relevant .js files of version 4.8?

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-10-06T09:49:36.41+00:00

Hi @Peter_1985

First, Ckeditor4 has reached the end of its life cycle in June 2023. For policy reasons, I cannot provide you with URLs. You can find the previous version of "Release Notes" on the download page of Ckeditor4's official website. Or you can use Ckeditor5.

Best Regards

Qi You
Peter_1985 2,736 Reputation points

2023-10-06T09:55:24.2133333+00:00

Yes, I was already using version 5 on the current page (of the project). Any code issue in above, causing the issue?

Answer 4

QiYou-MSFT 4,326 Microsoft External Staff

Hi @Peter_1985

This is how it is used in ckeditor5:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

I've modified it based on your code:

<script>
   var i = 0;
    $(document).ready(function () {
        $("#btn1").click(function () {
            i++;
            $("#total").append("<div id='editor'"+i+"></div>");
            ClassicEditor
                .create(document.querySelector('div'))
                .catch(error => {
                    console.error(error);
                });
        });
       
    });
</script>

Case2

Best regards,
Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Peter_1985 2,736 Reputation points

2023-10-09T08:23:18.2533333+00:00

I put the codes (of you) and it did not work as expected. Can you see it below?

https://1drv.ms/u/s!Ai8CrEskdewXzRfo5iGp9ZrFz4Dc?e=Uov12D
Peter_1985 2,736 Reputation points

2023-10-10T10:09:56.6766667+00:00

Many thanks. I want to select your current reply as the answer. Can you help?
QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-10-11T02:31:13.15+00:00

Hi @Peter_1985

Thank you for your support.

Best Regards

Qi You
Peter_1985 2,736 Reputation points

2023-10-11T04:42:08.13+00:00

You're welcome. How to ensure that new comment is well placed right, under the button "新评论"?
QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-10-11T10:06:18.47+00:00

Hi @Peter_1985

Just adjust the position of the controls.

Best Regards

Qi You

Peter_1985 2,736

I see the size of that (not the position) below.

           <p id="CommentList" style="  list-style-position: inside;
padding-left: 0;">
             <li >评论 1:<br /><textarea id="Comment1" name="MyEA" runat="server" placeholder="Enter your Comment here ..."
        style="width: 250px;height: 100px;"></textarea></li>
          </p>

Share via

CKEditor-related issue

3 additional answers

Your answer