Как интегрировать ckeditor в бритву?

Question

Я хочу интегрировать ckeditor-full 4.14 в страницу razor. Я загрузил пакет NuGet в свой проект в Visual Studio. Я не могу найти никакой документации о том, как реализовать его на странице .razor. Может ли кто-нибудь помочь?

Сообщение об ошибке

Answer 1

На странице razor мы добавляем скрипты в @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.cs html:

Добавьте следующее 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>