How to integrate ckeditor in a razor page? - asp.net-core

Question

I am looking to integrate ckeditor-full 4.14 into a razor page. I have downloaded the NuGet package into my project in Visual Studio. I cannot find any documentation on how to implement it into a .razor page. Can anyone help?
Error Message

Answer 1

In razor page,we add scripts in #section Scripts,you can add the script liking this:
<div>
<textarea id="textarea111"></textarea>
</div>
#section Scripts {
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript">
var ckeditor;
$(function () {
ckeditor = CKEDITOR.replace("textarea111");
});
</script>
}
And this is my result of the code.
Update:
In blazor pages:
Firstly, You can install from NuGet using the following command:
Install-Package Blazored.TextEditor
Next,in Pages/_Host.cshtml :
Add the following CSS in the head tag
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
Then add the JS script at the bottom of the page using the following script tag.
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>
<script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script>
And this is my page：
#inherits LayoutComponentBase
#using Blazored.TextEditor
<div>
<BlazoredTextEditor>
<ToolbarContent>
<select class="ql-header">
<option selected=""></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
<EditorContent>
<br />
<h4>You can edit the text.</h4>
</EditorContent>
</BlazoredTextEditor>
</div>