locked
Issue to CK editor RRS feed

  • Question

  • User364663285 posted

    Hi,
    Code below, should not be for CK editor 5

        <script type="text/javascript">
            CKEDITOR.replace('<%=ta1.ClientID.Replace("_","$") %>', { toolbar: 'Mybar' });
            $("#ta1").attr("disabled", "disabled");
        </script>
    

    Any idea to adjust to use CK editor 5? I've downloaded CK editor 5.

    Saturday, August 1, 2020 2:34 PM

Answers

  • User-1330468790 posted

    Hi wmec,

     

    I found there is an issue in the Github which is exactly the same as yours.  

    Ckeditor JS Dependencies fail to load (CKEDITOR.basePath not set correctly)

    The reason is as below:

    Ckeditor is checking base path as follows via following regex: var basePathSrcPattern = /(^|.*[\\\/])ckeditor\.js(?:\?.*|;.*)?$/i; - see ckeditor_base.js

    That means, if the ckeditor.js violates the regex, e.g. ckeditor.1571124595.js, then the ckeditor.js file can not be referenced correctly.

     

    Could you please check if the ckeditor.js file fulfill the format of the regex? If so, you should change it to make it accessible.

     

    The reason might be simple however you might need to dig more in your project to see why there is a setting for appending something in the file name. Probably it is a version number for browser cache.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 24, 2020 10:08 AM

All replies

  • User-1330468790 posted

    Hi wmec,

     

    I am not sure where the above codes are from. However, if the CK editor 5 you mentioned is this CKEditor5, then you could refer to below document to get started. 

    CKEditor5 Quick Start

    There are 5 types of editors in CKEditor5 Framework: 

    One example for Classic editor:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 – Classic editor</title>
        <script src="https://cdn.ckeditor.com/ckeditor5/21.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>

    Result:

     

    Hope this can help you.

    Best regards,

    Sean

    Monday, August 3, 2020 7:17 AM
  • User364663285 posted

    Thanks.

    Here is my previous code (using other version of CK editor). How to adjust it?

        <textarea id="ta1" name="MyEA" runat="server" ></textarea>
        <script type="text/javascript">
            CKEDITOR.replace('<%=ta1.ClientID.Replace("_","$") %>', { toolbar: 'Mybar' });
            $("#ta1").attr("disabled", "disabled");
        </script>
    

    Monday, August 3, 2020 7:51 AM
  • User-1330468790 posted

    Hi wmec,

     

    I am afraid that you could not simply adjust the previous code as the new version of CK editor is "a totally new editor". 

    The original description from the official document is as below: 

     "Every single aspect of it was redesigned — from installation, to integration, to features, to its data model, and finally to its API. Therefore, moving applications using a previous CKEditor version to version 5 cannot be simply called an “upgrade”. It is something bigger, so the “migration” term fits better."

     

    If you worry about the features that you used with the previous version of the CK editor, you could refer to here => Migration from CKEditor 4 

    The guidance mainly tells two differences:

    • CKEditor 5 may still not have the same features available as CKEditor 4.
    • Existing features may behave differently.

    I suggest you read the article and analyse the feature case by case.

    After that, if you have any problem, feel free to let us know.

     

    Best regards,

    Sean

    Monday, August 3, 2020 10:27 AM
  • User364663285 posted

    Hi,

    I am using previous version of CKEditor. Can you help to error below?

    jquery.js:5 Uncaught Error: jQuery should be loaded before CKEditor jQuery adapter.
        at jquery.js:5
        at jquery.js:10

    Here is my code:

        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
        <textarea id="ta1" name="MyEA" runat="server" ></textarea>
        <script type="text/javascript">
            CKEDITOR.replace('<%=ta1.ClientID.Replace("_","$") %>', { toolbar: 'Mybar' });
            $("#ta1").attr("disabled", "disabled");
        </script>

    Tuesday, August 4, 2020 10:11 AM
  • User-1330468790 posted

    Hi wmec,

     

    The problem is what the error tells. You should load the jquery before CKEditor jQuery adapter. However, you may not load the jquery library in your code.

    Note that adapters/jquery.js is not Jquery library but a jquery adapter as it contains below description:

    jQuery adapter provides easy use of basic CKEditor functions and access to internal API. It also integrates some aspects of CKEditor with jQuery framework

     

    Again, please add jquery library in your code and put it before the ckeditor and jquery adapters as below exmple (you could choose whatever version of jquery to fit your project):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/ckedit../../ckeditor.js"></script>
    <script src="/ckeditor/adapters/jquery.js"></script>

     

    Hope this can help you.

    Best regards,

    Sean
      

    Thursday, August 6, 2020 6:49 AM
  • User364663285 posted

    I put the code, and I have Error like

    Refused to apply style from 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' because its MIME type ('text/javascript') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

    Can you help?

    Thursday, August 6, 2020 12:45 PM
  • User-1330468790 posted

    Hi wmec,

     

    The error message looks so weird. Could you please show me the codes?

     

    You could try below codes which is working from my side: the CKEditor4 (4.13.1) is downloaded from here: CKEditor 4 download

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script src="Scripts/ckeditor/ckeditor.js"></script>
        <script src="Scripts/ckeditor/adapters/jquery.js"></script>
    
        
    </head>
    <body>
        <script type="text/javascript">
            $(function () {
                $('textarea').ckeditor({
                    uiColor: '#9AB8F3'
                });
            })
        </script>
        <form id="form1" runat="server">
            <div>
                <textarea>Lorem ipsum</textarea>
            </div>
        </form>
    </body>
    </html>
    

    Result:

     

    Hope this can help you.

    Best regards,

    Sean

    Friday, August 7, 2020 10:37 AM
  • User364663285 posted

    Hi Sean,

    Yes, I am using the similar version like 

    ckeditor_4.14.1_standard

    Here is the code

    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EditSelfIntro._Default" ValidateRequest="false" %>
    
    <!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="StyleSheet1.css"/>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    </head>
    <body bgcolor="#1BA8E0">
    	<form id="form1" runat="server">
        <div >
        <table width="100%" align="right">
        <!--tr>
         <td align="right" style="background-color:#0A2757;height:1px;font-size:1px;">&nbsp;</td>
        </tr-->
            <tr>
            <td align="right">
                <asp:LinkButton ID="lb_bck" 
                    Text = "Back"
                    CssClass="lb_bck"
                    Font-Names="Times New Roman" 
                   OnClick="lb_bck_Click"
                   runat="server"/>
                   &nbsp;|&nbsp; 
                <asp:LinkButton ID="lb_exit" 
                    Text = "Exit"
                    CssClass="lb_exit"
                    Font-Names="Times New Roman" 
                   OnClientClick="window.close()" 
                   runat="server"/>
            </td>
            </tr>
        </table>
        </div>
        <br />
        <br />
        <div class="left up">
           <asp:Image ID="aspImagePreview" runat="server" AlternateText="Preview" ImageUrl="~/output.jpg" />
        </div>
        <div class="right up">
        <div id="Dv1" style="text-align:left;background-color:#1BA8E0;">
        <asp:Label ID="Label1"
            Text="Self-Introduction"
            width="500px"
            Font-Names="Times New Roman" 
            Font-Size="15pt" 
            Font-Bold="true"
            ForeColor="DarkBlue"
            runat="server" />
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
        <textarea id="ta1" name="MyEA" runat="server" ></textarea>
        <script type="text/javascript">
            CKEDITOR.replace('<%=ta1.ClientID.Replace("_","$") %>', { toolbar: 'Mybar' });
            $("#ta1").attr("disabled", "disabled");
        </script>
        <br />
        <asp:Button ID="btnSave" runat="server" Width="140px" Text="Save" OnClick="btnSave_Click" CssClass="rounded" />
        <asp:Button ID="btnCancel" runat="server" Width="140px" Text="Cancel" OnClick="btnCancel_Click" CssClass="rounded" />   
        <asp:Label ID="lblDisplay" runat="server" Text="" Visible = "false" ></asp:Label>
        <br /><br />
        <asp:Label runat="server" id="lb_msg" text="" Font-Size="Large" ForeColor="#E01B84" />  
        </div>
    	</form>
    </body>
    </html>

    Friday, August 7, 2020 3:27 PM
  • User-1330468790 posted

    Hi wmec,

     

    I find two errors in your codes:

    1. The CKEditor.js should be loaded before the jquery adapter js file.
    2.  Why you use the replace method here ? <%=ta1.ClientID.Replace("_","$") %>. The CKEDITOR needs textarea's id which should be retrieved by ClientID of that server control. You don't need to do any replace stuff.

    I delete some meaningless codes for my testing purpose and make the codes working. 

    You could refer to below codes.

    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="right up">
                <div id="Dv1" style="text-align: left; background-color: #1BA8E0;">
                    
                    <script type="text/javascript" src="<%= ResolveUrl("Scripts/ckeditor/ckeditor.js") %>"></script>
                    <script type="text/javascript" src="<%= ResolveUrl("Scripts/ckeditor/adapters/jquery.js") %>"></script>
                    <textarea id="ta1" name="MyEA" runat="server"></textarea>
                    <script type="text/javascript">
                        CKEDITOR.replace('<%=ta1.ClientID %>', { toolbar: 'Mybar' });
                        $("#ta1").attr("disabled", "disabled");
                    </script>
                    
                </div>
            </div>
        </form>
    </body>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Saturday, August 8, 2020 9:12 AM
  • User364663285 posted

    Hi,
    Can you help to error like

    jquery.js:5 Uncaught Error: jQuery should be loaded before CKEditor jQuery adapter.
    at jquery.js:5
    at jquery.js:10


    Here is my code:

    <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EditSelfIntro._Default" ValidateRequest="false" %>
    
    <!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="StyleSheet1.css"/>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    </head>
    <body bgcolor="#1BA8E0">
    	<form id="form1" runat="server">
        <div >
        <table width="100%" align="right">
        <!--tr>
         <td align="right" style="background-color:#0A2757;height:1px;font-size:1px;">&nbsp;</td>
        </tr-->
            <tr>
            <td align="right">
                <asp:LinkButton ID="lb_bck" 
                    Text = "Back"
                    CssClass="lb_bck"
                    Font-Names="Times New Roman" 
                   OnClick="lb_bck_Click"
                   runat="server"/>
                   &nbsp;|&nbsp; 
                <asp:LinkButton ID="lb_exit" 
                    Text = "Exit"
                    CssClass="lb_exit"
                    Font-Names="Times New Roman" 
                   OnClientClick="window.close()" 
                   runat="server"/>
            </td>
            </tr>
        </table>
        </div>
        <br />
        <br />
        <div class="left up">
           <asp:Image ID="aspImagePreview" runat="server" AlternateText="Preview" ImageUrl="~/output.jpg" />
        </div>
        <div class="right up">
        <div id="Dv1" style="text-align:left;background-color:#1BA8E0;">
        <asp:Label ID="Label1"
            Text="Self-Introduction"
            width="500px"
            Font-Names="Times New Roman" 
            Font-Size="15pt" 
            Font-Bold="true"
            ForeColor="DarkBlue"
            runat="server" />
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>
        <textarea id="ta1" name="MyEA" runat="server" ></textarea>
        <script type="text/javascript">
            CKEDITOR.replace('<%=ta1.ClientID %>', { toolbar: 'Mybar' });
            $("#ta1").attr("disabled", "disabled");
        </script>
        <br />
        <asp:Button ID="btnSave" runat="server" Width="140px" Text="Save" OnClick="btnSave_Click" CssClass="rounded" />
        <asp:Button ID="btnCancel" runat="server" Width="140px" Text="Cancel" OnClick="btnCancel_Click" CssClass="rounded" />   
        <asp:Label ID="lblDisplay" runat="server" Text="" Visible = "false" ></asp:Label>
        <br /><br />
        <asp:Label runat="server" id="lb_msg" text="" Font-Size="Large" ForeColor="#E01B84" />  
        </div>
    	</form>
    </body>
    </html>

    Saturday, August 8, 2020 2:11 PM
  • User-1330468790 posted

    Hi wmec,

     

    Let's firstly make the dependencies clear.

    The CKEditor requires three js files, which should be loaded in order:

    1. JQuery library, which can be fetched from CDN like below: 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      Please note that the js file should be loaded using <script> tag.
    2. ckeditor.js file, which has been loaded in your page:
       <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
    3. adaptor/jquery.js file, which has been loaded in your page as well:
      <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>

    The error occurs due to the missing of the file Jquery library. Please load those files in order and make sure that they could be loaded correctly using <script> tag.

     

    Best regards,

    Sean

    Sunday, August 9, 2020 5:05 AM
  • User364663285 posted

    Hi,

    Sorry, can you help to error below? I do put the reference in the same order like yours.

    Default.aspx?userid=13:1 Refused to apply style from 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' because its MIME type ('text/javascript') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    editor.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

    Sunday, August 9, 2020 5:38 AM
  • User-1330468790 posted

    Hi wmec,

     

    Could you please check the codes I provided with?

    As you can see, I use <script> tag to load the js file while you use <link> tags. The browser loads a Javascript file however you tell it that the file is CSS file. That is the reason for the error.

    Please load the Javascript file with below codes:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

      

    Best regards,

    Sean
     

    Tuesday, August 11, 2020 10:01 AM
  • User364663285 posted

    Hi,
    Any help to this error?
    https://1drv.ms/u/s!Ai8CrEskdewXtUtvkZ74BaqKFLox?e=5Ja4R8 

    content path below

    <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>

    is equivalent to physical path below. Is it due to path issue?

    C:\inetpub\vs2012\EditSelfIntro4\content



    Wednesday, August 12, 2020 2:05 AM
  • User-1330468790 posted

    Hi wmec,

     

    It looks like that a file named "config.js" is missing from the given url. Could you please check if it exists in that path?

    If you use "~/" in the path, it is a relative path whose root is "C:\inetpub\vs2012\EditSelfIntro4\content" (if "C:\inetpub\vs2012\" is the project folder location).

     

    Best regards,

    Sean

    Thursday, August 13, 2020 11:21 AM
  • User364663285 posted

    Hi Sean,
    As there is reference to config.js file, where to have such file?

    EditSelfIntro4 is the folder, to which I deploy the project.

    Friday, August 14, 2020 2:52 AM
  • User-1330468790 posted

    Hi wmec,

     

    As there is reference to config.js file, where to have such file?

    That is the question. You should check the page mark up codes which contains the reference to this file (e.g. <script src=".../config.js"/>). 

    If you are sure that it is useless for this page, just remove the reference from the page. 

      

    I would like to know whether the config.js file is included by yourself or not? 

    If you use a prepared project template, you might need to do research about why the config.js file is included in the page and what purpose it is for.

     

    Best regards,

    Sean

     

    Saturday, August 15, 2020 9:22 AM
  • User364663285 posted

    Thanks

    Saturday, August 15, 2020 10:45 AM
  • User-1330468790 posted

    Hi wmec,

     

    Have your problem been solved?

    Feel free to let me know. 

     

    Best regards,

    Sean

    Monday, August 17, 2020 11:15 AM
  • User364663285 posted

    Hi,

    There is still error like the one below.

    https://1drv.ms/u/s!Ai8CrEskdewXtVJgVp1dyKW5us4l?e=aD1V61 

    Monday, August 17, 2020 3:41 PM
  • User-1330468790 posted

    Hi wmec,

     

    I cannot identity the error message since you only show me a part of the error

    What I can guess is that it is a 404 error, correct?

    Could you please show me the related mark up codes?

    For example, how do you use html to include the js file?

     

    Best regards,

    Sean

    Tuesday, August 18, 2020 9:10 AM
  • User364663285 posted

    Hi,
    Here are the errors encountered now.

    https://1drv.ms/u/s!Ai8CrEskdewXtVOTS5L7VPCZObGt?e=YUKniq 

    Tuesday, August 18, 2020 12:18 PM
  • User-1330468790 posted

    Hi wmec,

     

    It looks like you missing the setting for the CKEditor for the environment.

    Could you please show me how you integrate the CKEditor4 in your project? 

     

    One reason is that you do not download all of files for CKEditor4?

    The files inside the folder should look like below:

     If you don't, you could go to CKEditor 4 's website to download the necessary package. 

     

    Best regards,

    Sean

    Wednesday, August 19, 2020 6:44 AM
  • User364663285 posted

    Hi,
    I have put relevant config.js. Any advice to issue below?

    https://1drv.ms/u/s!Ai8CrEskdewXtVUy-j-U7ywA6IJM?e=VlvuEY 

    Wednesday, August 19, 2020 8:37 AM
  • User-1330468790 posted

    Hi wmec,

     

    I found there is an issue in the Github which is exactly the same as yours.  

    Ckeditor JS Dependencies fail to load (CKEDITOR.basePath not set correctly)

    The reason is as below:

    Ckeditor is checking base path as follows via following regex: var basePathSrcPattern = /(^|.*[\\\/])ckeditor\.js(?:\?.*|;.*)?$/i; - see ckeditor_base.js

    That means, if the ckeditor.js violates the regex, e.g. ckeditor.1571124595.js, then the ckeditor.js file can not be referenced correctly.

     

    Could you please check if the ckeditor.js file fulfill the format of the regex? If so, you should change it to make it accessible.

     

    The reason might be simple however you might need to dig more in your project to see why there is a setting for appending something in the file name. Probably it is a version number for browser cache.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 24, 2020 10:08 AM