如何在 Formik 中集成 TinyMCE 富文本编辑器？

Question

我想在我现有的 Formik 表单中添加 tinymce 富文本编辑器。

之前：

          <Field name='description'>
              {({ field, meta }) => (
                <div>
                   <textarea
                    id='article_body'
                    type='text'
                    rows='15'                  
                    placeholder='Write description...'
                    {...field}
                   ></textarea> 
                 </div>
            </Field>

现在：

      <Field name='description'>
         {({ field, meta }) => (
           <div>
            <Editor
                id='article_body'
                apiKey='my-api-key'
                initialValue='Write...'
                init={{
                  height: 500,
                  menubar: true,
                  plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount',
                  ],
                  toolbar:
                    'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter 
                     alignright alignjustify |  bullist numlist outdent indent | removeformat |help',
                }}
                onEditorChange={(content, editor) => {
                  console.log(content);
                }}
                textareaName='description'
                onChange={field.onChange}
                onBlur={field.onBlur}
                value={values.description}
              />
          </div>
       </Field>

它不起作用，我认为没有找到字段值，这就是为什么它显示错误“需要描述！”

Answer 1

Formik handleChange 需要一个具有 'target' 属性的对象，该属性同时具有 'name' 和 'value' 属性。TinyMCE onEditorChange 仅传递新值。以下对我有用：

onEditorChange={(e) => {
    handleChange({ target: { name: 'description', value: e } })
}}