Forms and reset

The textarea name becomes the submitted field name. SoEditor synchronizes its value and refreshes canonical HTML before native submit. Reset restores the textarea default content.

For an Ajax form, call preventDefault() in the submit handler and read FormData. The demo displays that data without sending a request. Check required-field behavior in your actual form and validate fields on the server.

Run the native form example.

Runnable code

import { createClassicEditor } from 'soeditor-release/cms';
import {
    options,
    instance,
    button,
    label,
    type DemoContext,
} from './shared.js';
export async function mount(ctx: DemoContext) {
    const editor = await createClassicEditor(ctx.host, options(ctx));
    ctx.form.addEventListener(
        'submit',
        (event) => {
            event.preventDefault();
            ctx.output.textContent = String(
                new FormData(ctx.form).get('content'),
            );
            ctx.status.textContent = label(
                ctx,
                '表单已读取，未发送网络请求',
                'Form read locally; no request was sent',
            );
        },
        { signal: ctx.signal },
    );
    button(ctx, '提交表单', 'Submit form', () => ctx.form.requestSubmit());
    button(ctx, '重置表单', 'Reset form', () => ctx.form.reset());
    return instance(editor);
}

Shared options configures locale and change callbacks. ctx.host is a textarea with name="content". The native form example includes the full host and shared code.

Common errors

A field without name is absent from FormData. Mounting on an ordinary element does not create an implicit form field: copy getData() into a host field on submit. Reset uses the textarea default value, not the most recently saved result.

Next steps

Examples · Configuration · Troubleshooting