search

ckeditor / ckeditor4-react

Official CKEditor 4 React component.
Other
97 stars 52 forks source link

Font, FontSize, and Underline are not appeared in the toolbar #251

Closed YunosukeY closed 3 years ago

YunosukeY commented 3 years ago

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

Based on the basic example (https://codesandbox.io/s/github/ckeditor/ckeditor4-react/tree/master/samples/basic?file=/src/App.jsx),

  1. Add a config about the toolbar 
       <CKEditor
      debug={true}
      initData="<p>Hello <strong>world</strong>!</p>"
      config={{
        toolbar: [
          ["Styles", "Format", "Font", "FontSize"],
          ["Bold", "Italic", "Underline", "Strike"]
        ]
      }}
    />

A reproduction in the codesandbox: https://codesandbox.io/s/suspicious-worker-r7f8v?file=/src/App.jsx

Expected result

All of Styles, Format, Font, FontSize, Bold, Italic, Underline, and Strike are appeared in the toolbar.

Actual result

Only Styles, Format, Bold, Italic, and Strike are appeared in the toolbar.

I found a similar bug in the document. The document: https://ckeditor.com/docs/ckeditor4/latest/examples/react.html#/configuration The source of the document: https://github.com/ckeditor/ckeditor4-docs/blob/master/docs/sdk/examples/react.html#L226

Other details

sculpt0r commented 3 years ago

Hi @YunosukeY Thank you for the report. I can confirm this issue. Seems like this issue exists since the beginning 🤔 I've got the same invalid results on Chrome, FF and Safari.

MMMalik commented 3 years ago

Hi @YunosukeY,

all ckeditor4 integrations use by default standard-all preset which does not include font plugin. Therefore, it cannot display Font and FontSize toolbar items. If you need those features, you can either use full preset or create a custom build of editor.

As for Underline feature, it is part of basicstyles plugin which is included in standard-all preset. However, some of that plugin's features are purposefully hidden by default, including Underline button. You can enable it though for standard-all preset with the following snippet (see this sample):

<CKEditor
  config={{
    toolbar: [["Underline", "Italic", "Bold"]],
    removeButtons: null
  }}
  debug={true}
  initData="<p>Hello <strong>world</strong>!</p>"
 />

Please note that our GitHub issue tracker serves for reporting bugs and new features only. Unfortunately, your request is neither of them, therefore please leave your question on Stack Overflow where our team and the community assist other users in solving their issues. Also, since CKEditor is an Open Source software, we believe it’s crucial to share proposed solutions and make others benefit from them.

If you have CKEditor license, please contact our support team. You also can ask your implementation questions at Stack Overflow.