Advanced rich text editor (field) quill - how to make more tools?

English Forum Questions
1

Hello developers (and NocoBase developers)!
I am not a programmer, but I found your platform and find it very comfortable and functional. I am using it to create my own CMS. For this, I need a more advanced version of the Rich Editor (I need more tools in the toolbar). Currently, there is a simplified version

image
image1008Ă—796 22.4 KB

But it is extremely important to me that it be as advanced as possible (as far as possible) so that users can format text (H1-H6 headings, fonts, text highlighting, text color, image uploading, link creation). I understand that the core uses the basic version of the Quill editor? Is it possible (this is a question for the NocoBase developers) to make an extended version in the core? Perhaps I am not the only one who needs this version of the editor? Is it difficult to implement?

image
image1658Ă—846 202 KB

I understand that it is possible to either create a plugin and connect it, or do it myself in the code (I found where the editor files are in the repository), or use another editor - Markdown (Vditor), but there are problems:

  1. I am not a programmer, but I tried to create my own plugin using Vibe Coding (VS Code + AI Agents). But nothing works, alas, I need to know coding…
  2. Rebuild the editor’s source file in the code myself… This is an unknown experiment for me… As I said above, I am not a programmer, I don’t think this is a good idea for me. Besides, if I update NocoBase to a new version, the changes will be overwritten and I will have to change the editor code again…
  3. The Markdown editor is not very user-friendly… For content creation, I am more used to a classic rich text editor, as it is more comfortable to work with HTML format there.

So I would like to know if there is a solution for me as a non-programmer (maybe I don’t know all the intricacies of integration, maybe there is a way to connect an external editor without code? But it is important that the HTML data is stored in the database). This is really important to me. I would appreciate any tips and help from experts (but first and foremost, I hope that the main developers will create an extended version).

2

Did you try Vditor?

1 Like
3

Hello, @bwconsultant2000!
Thanks for your reply. Yes, I tried using Vditor, but as I wrote above, it’s not very user-friendly. It’s unfamiliar to content creators and authors… What’s familiar and convenient is a rich text editor with a maximum set of formatting tools.

4

Hello, dear Nocobase developers!

I don’t want to give up and get discouraged)) I’m still trying to find a way to add an extended version of the Rich Text Editor. I updated my Nocobase to version 2.0 Alpha, which allows me to change the code in the frontend using JavaScript. I’m not a programmer (as I mentioned above), so I connected Google Gemini API and enabled an internal AI assistant Nathan for frontend coding )).

I added a field with the Rich Editor to the editing form using the new JS Field option.

image
image1228Ă—843 127 KB

However, the Rich Editor itself was not displayed in this form… I wanted to ask Nathan AI to refine the code so that I would have the maximum extended mode of the Rich Editor with a more complete set of toolbars. However, I couldn’t even display the editor itself in its original form…
image
image1246Ă—828 95.6 KB

Is there any way to correctly display the Rich Text Editor in JS Field mode? Is it possible to configure this somehow?

5

Or maybe the esteemed developers (code owners) of Nocobase could modify the source code (which I can see on GitHub) nocobase/packages/core/client/src/schema-component/antd/rich-text/RichText.tsx at a575de9fce23db9e0825505ba1d2351a24b1ca3c · nocobase/nocobase · GitHub?
As I understand it, this is “undeployed” code that is compiled on the server? Could you change it a little so that it already contains the full version of the Rich Editor, for example, like this (I asked AI to write this version of the code in a file, it may be incorrect and serves as an example):

/**
 * This file is part of the NocoBase (R) project.
 * Copyright (c) 2020-2024 NocoBase Co., Ltd.
 * Authors: NocoBase Team.
 *
 * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
 * For more information, please refer to: https://www.nocobase.com/agreement.
 */
import { connect, mapProps, mapReadPretty } from '@formily/react';
import React from 'react';
import { css } from '@emotion/css';
import classNames from 'classnames';
import { lazy } from '../../../lazy-helper';
import { isVariable } from '../../../variables/utils/isVariable';
import { ReadPretty as InputReadPretty } from '../input';
import { useStyles } from './style';

const ReactQuill = lazy(() => import('react-quill'));

export const RichText = connect(
  (props) => {
    const { wrapSSR, hashId, componentCls } = useStyles();
    const modules = {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }, { 'header': 4 }, { 'header': 5 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'direction': 'rtl' }, { 'align': [] }],
        [{ 'color': [] }, { 'background': [] }],
        ['link', 'image', 'video'],
        ['clean']
      ],
    };
    const formats = [
      'header',
      'bold', 'italic', 'underline', 'strike',
      'blockquote', 'code-block',
      'list', 'bullet', 'indent', 'script',
      'direction', 'align',
      'color', 'background',
      'link', 'image', 'video', 'clean'
    ];
    const { value, defaultValue, onChange, disabled, modules: propsModules, formats: propsFormats } = props;
    const resultValue = isVariable(value || defaultValue) ? undefined : value || '';
    const quillDisabled = css`
      .ql-container.ql-disabled {
        background-color: #f5f5f5;
        color: #999;
        opacity: 0.7;
        cursor: not-allowed;
        pointer-events: none;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
      }
    `;
    return wrapSSR(
      <ReactQuill
        className={classNames(componentCls, hashId, quillDisabled, {
          'is-disabled': disabled,
        })}
        modules={propsModules || modules}
        formats={propsFormats || formats}
        value={resultValue}
        onChange={(value) => {
          if (value === '<p><br></p>') {
            onChange('');
          } else {
            onChange(value);
          }
        }}
        readOnly={disabled}
      />,
    );
  },
  mapProps({
    initialValue: 'defaultValue',
  }),
  mapReadPretty((props) => {
    return <InputReadPretty.Html {...props} />;
  }),
);

I can’t change the code myself because I use a quick installation from Docker on my server (EasyPanel). I’ve already tried different ways to make my own rich text editor, but I can’t get it to work… So I’m asking the developers to make this small change to the platform core… I would be very grateful!

6

Please refer to Plugin development - Collection field Rich Text Editor Quill full version - Who can develop it? - #2 by alcompstudio

1 Like