我需要为 .net mvc 项目中使用的 ckeditor 使用下划线工具选项

问题描述 投票：0回答：1

我用了这个ckeditor cdn 

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

当我在 js 中使用此代码使用工具栏选项创建 ckeditor 时，我得到列出的所有选项，但没有下划线工具。 ClassicEditor.create(这个, { 工具栏：['粗体'，'斜体'，'下划线'，'bulletedList'，'numberedList'，'链接']， }).catch(错误=> { 控制台.错误（错误）； });

加载时我在控制台中收到此错误：toolbarview-item-unavailable Objectitem: "Underline"[[Prototype]]: Object 了解更多：https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable

请帮我解决这个问题

我需要在编辑器中使用下划线工具

javascript asp.net-mvc ckeditor ckeditor5
1个回答
0
投票

您的尝试中存在一些错误，因为 UI 元素是混合大小写的，因此有些需要是 

Underline
，而另一些则需要是 
underline

添加下划线 enter image description here

需要在导入中定义

Underline

<script type="module">
            import {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Underline,
                Paragraph
            } from 'ckeditor5';

对于插件，但工具栏小写

.create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph, Underline, ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', 'underline', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
 


<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Underline,
                Paragraph
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph, Underline, ],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', 'underline', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ]
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.