Reactjs 中 CKEditor 5 中的“numberedList”功能不起作用答案

【问题标题】："numberedList" feature in CKEditor 5 in Reactjs doesn't workReactjs 中 CKEditor 5 中的“numberedList”功能不起作用
【发布时间】：2020-04-11 03:03:51
【问题描述】：

我阅读了很多关于 CKEditor 5 的问题及其答案，但我还没有解决我的问题。这是我用于 CKEditor 的反应组件：

import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.defaultConfig = {
    toolbar: [
        "heading", "|", "bold", "fontFamily", "italic", "link", "bulletedList", "numberedList", "blockQuote", "insertTable", "undo", "redo"
],

    // This value must be kept in sync with the language defined in webpack.config.js.
     language: 'fa'
};

const BusinessDescription = ({
        onChange,
       defaultValue
}) => {
return <div className="Business-editor ">
    <CKEditor
        editor={ ClassicEditor }
        data={defaultValue || ''}
        onBlur={ ( event, editor ) => {
            onChange(editor.getData());
        }}
    />

</div>;
};
export default BusinessDescription;

我的问题是：当用户选择“NumberEedList”图标时，它不起作用，也在选择“BulletedList”图标时， but when selects "blockQuote" then "bulletedList", the features for block quote and bulleted list work well.当用户选择“blockQuote”然后选择“numberedList”时，会发生奇怪的情况。在这种情况下，块引用和项目符号列表的功能再次起作用，并且在任何情况下“编号列表”都不起作用。

【问题讨论】：

标签： reactjs ckeditor ckeditor5

【解决方案1】：

添加这个 css。

.ck.ck-content ul,
.ck.ck-content ul li {
  list-style-type: inherit;
}

.ck.ck-content ul {
  /* Default user agent stylesheet, you can change it to your needs. */
  padding-left: 40px;
}

.ck.ck-content ol,
.ck.ck-content ol li {
  list-style-type: decimal;
}
.ck.ck-content ol {
  /* Default user agent stylesheet, you can change it to your needs. */
  padding-left: 40px;
}

样式必须已被覆盖。

github-comment

【讨论】：