如何将ckeditor集成到剃须刀页面中？

Question

我希望将 ckeditor-full 4.14 集成到剃须刀页面中。我已将 NuGet 包下载到我在 Visual Studio 中的项目中。我找不到任何关于如何将它实现到 .razor 页面的文档。有人可以帮忙吗？

Error Message

Answer 1

在剃须刀页面，我们在@section Scripts中添加脚本，你可以像这样添加脚本：

<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>
}

这是我的代码结果。

更新：

在 Blazor 页面中：

首先，您可以使用以下命令从 NuGet 安装：

Install-Package Blazored.TextEditor

接下来，在 Pages/_Host.cshtml 中：

在head标签中添加如下CSS

<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"> 

然后使用下面的脚本标签在页面底部添加JS脚本。

<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>

这是我的页面：

@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>