📌  相关文章
📜  classiceditor 未使用 npm 定义 - Javascript (1)

📅  最后修改于: 2023-12-03 14:40:06.254000             🧑  作者: Mango

ClassicEditor 未使用 npm 定义

如果您正在使用 ClassicEditor 编辑器，并且您没有使用 npm 定义它，那么本文就是为您而写的。

ClassicEditor 是什么？

ClassicEditor 是一个基于富文本编辑器（WYSIWYG）的插件。它使用了 CKEditor 5 的框架，并且是可定制的、易于扩展的。

为什么不使用 npm 定义？

虽然使用 npm 可以方便地安装 ClassicEditor 并在项目中使用它，但有些情况下可能不方便或不适用。一些使用不支持 npm 的环境、或者需要自定义插件的场景，你就需要不使用 npm 定义 ClassicEditor。

如何使用？

在您的 HTML 页面中增加如下代码：

<!-- ClassicEditor 的基本 CDN 版本 -->
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>

<!-- ClassicEditor 的配置 -->
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            /*您自定义的配置*/
        } )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

<!-- ClassicEditor 编辑器对应的文本域 -->
<textarea id="editor">您的文本</textarea>
您可以配置 ClassicEditor 的哪些参数？

以下是一些可能有用的配置：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'Link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo' ],
        /*  工具栏设置  */
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
            ]
        },
        /*  段落设置  */
        language: 'en', // 设置编辑器的语言，en（英语）、zh（中文）等。
        image: {
            toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
            /*  图片设置  */
            styles: [
                { name: 'full', title: 'Full size', icon: 'full', },
                { name: 'side', title: 'Side image', icon: 'side' }
            ]
        },
        table: {
            contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
            /* 表格设置 */
        }
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );
参考文献