how to disable the redundant toolbars and functionalities from editor?

[rohan2734]

how to disable the redundant toolbars and functionalities from editor?

[th-e0]

Very easy, simply modify EditorToolbar.js

[rohan2734]

how exactly? elaborate it

On Tue, 23 Aug, 2022, 1:55 pm th-e0, @.***> wrote:

Very easy, simply modify EditorToolbar.js

— Reply to this email directly, view it on GitHub https://github.com/zenoamaro/react-quill/issues/769#issuecomment-1223730970, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN6P37QS3XMH5CI7NAWNDULV2SDJHANCNFSM5PIA7MLQ . You are receiving this because you authored the thread.Message ID: @.***>

[th-e0]

Open EditorToolbar.js

Then go to following:

// Quill Toolbar component
export const QuillToolbar = () => (
  <div id="toolbar">
    <span className="ql-formats">
        <select className="ql-font" defaultValue="poppins">
        <option value="poppins">Poppins</option>
        <option value="arial">Arial</option>
        <option value="courier-new">Courier New</option>
        <option value="georgia">Georgia</option>
        <option value="helvetica">Helvetica</option>
        <option value="lucida">Lucida</option>
      </select>
      <select className="ql-size" defaultValue="medium">
        <option value="extra-small">Size 1</option>
        <option value="small">Size 2</option>
        <option value="medium">Size 3</option>
        <option value="large">Size 4</option>
      </select>
      <select className="ql-header" defaultValue="3">
        <option value="1">Heading</option>
        <option value="2">Subheading</option>
        <option value="3">Normal</option>
      </select>
    </span>
    <span className="ql-formats">
      <button className="ql-bold" />
      <button className="ql-italic" />
      <button className="ql-underline" />
      <button className="ql-strike" />
    </span>
    <span className="ql-formats">
      <button className="ql-list" value="ordered" />
      <button className="ql-list" value="bullet" />
      <button className="ql-indent" value="-1" />
      <button className="ql-indent" value="+1" />
    </span>
    <span className="ql-formats">
      <button className="ql-script" value="super" />
      <button className="ql-script" value="sub" />
      <button className="ql-blockquote" />
      <button className="ql-direction" />
    </span>
    <span className="ql-formats">
      <select className="ql-align" />
      <select className="ql-color" />
      <select className="ql-background" />
    </span>
    <span className="ql-formats">
      <button className="ql-link" />
    </span>
    <span className="ql-formats">
      <button className="ql-undo">
        <CustomUndo />
      </button>
      <button className="ql-redo">
        <CustomRedo />
      </button>
    </span>
  </div>
);

Then lets say you want to remove Undo / Redo function from tool bar, you would simply remove the part:

    <span className="ql-formats">
      <button className="ql-undo">
        <CustomUndo />
      </button>
      <button className="ql-redo">
        <CustomRedo />
      </button>
    </span>