Yesterday I downloaded the Classic Editor of build ckeditor5 (version 40) from the official website and am struggling to implement it into my ASP.NET MVC website. Following their .NET tutorial, I attempted to create a simple WYSIWYG editor, but am regularly running into the ReferenceError: ClassicEditor is not Defined message that I have seen others run into with CKEditor5, even after downloading and attempting to mimic the MRE for the ClassicEditor from their website.

Here is what my code looks like, noting that multiple Bootstrap and jQuery links are handled by a core library outside of this repository, meaning scripts are typically loaded into their own Razor @RenderSection:

@section Scripts {
  <script src="/js/ckeditor.js"></script>
  <script>
    ClassicEditor
      .create($('#ckeditor'))
      .catch(error => {
          console.error(error);
      });
  </script>
}
<div >
  <div >
    <div >
      <div >
        <textarea  id="ckeditor"></textarea>
      </div>
    </div>
  </div>
</div>

Some of the suggestions I tried already include:

1. Replacing /js/ckeditor.js with the CDN link
2. Placing the ClassicEditor inside and outside of a jQuery $(function(){})
3. Setting window.ClassicEditor=ClassicEditor in the script
4. Setting var ClassicEditor = require('js/ckeditor')

CodePudding user response：

The reason why the <script src="/js/ckeditor.js"></script> line seemed to be ignored is because, as was dictated by the core library, scripts are typically handled in a Razor @RenderSection, which was not acknowledging the ckeditor.js file when it was entered in, causing the title error.

The fix for this was to place the ckeditor.js file outside the @RenderSection like so:

<script src="/js/ckeditor.js"></script>
@section Scripts {
  <script>
    ClassicEditor
      .create($('#ckeditor'))
      .catch(error => {
          console.error(error);
      });
  </script>
}

With this fix, the ClassicEditor works exactly as intended.