使用经典 CKEditor5 和表单控制反应引导程序

Question

大家好，我是网络开发方面的新手，我想尝试使用react-bootstrap中的表单控件来实现富文本编辑器（我正在使用经典CKEditor 5），但是当我用Form.Control包装它时，它不会出现并且在控制台中显示错误

我尝试了这个，但显示错误

<Form.Control>
        <CKEditor
          editor={ClassicEditor}
          data={value}
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            onChangeText(data);
          }}
          onBlur={(event, editor) => {
            console.log('Blur.', editor);
          }}
          onFocus={(event, editor) => {
            setShowErr(true);
          }}
        />
      </Form.Control>

这是我的替代方案，我使用边框颜色，但它不令人愉快（但有效），它在无效时显示颜色

<div className={`${showErr && isInvalid ? 'container' : ''} `}>
        <CKEditor
          editor={ClassicEditor}
          data={value}
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            onChangeText(data);
          }}
          onBlur={(event, editor) => {
            console.log('Blur.', editor);
          }}
          onFocus={(event, editor) => {
            setShowErr(true);
          }}
        />
      </div>

我希望当我在 ckeditor 中不输入任何内容时，它会显示反应引导程序形式的错误。再次感谢

Answer 1

我面临着类似的问题（使用 React Quill）并尝试了这个解决方案，以解决验证问题：

<Form.Group>
    <Form.Label>Evolução / Queixas</Form.Label>
    <ReactQuill theme='snow' value={evolution} onChange={setEvolution} modules={quillModules}/>
    <Form.Control type='text' isValid={isFormValidated && !Boolean(errors.evolution?.message)} style={{display: 'none'}}/>
    <Form.Control.Feedback type='invalid'>{errors.evolution?.message}</Form.Control.Feedback>
</Form.Group>

我在代码中所做的是使用“幽灵”辅助Form.Control，不可见。在其 isValid 函数中，我正在检查反应鹅毛笔输入（而不是表单控件）是否有效。我还使用 React Hook Form 来控制输入和错误消息，但我不认为它对于这个解决方案有任何影响。