佛系程序员_ SimpleMDE Content Not Syncing to Textarea on Form Submit

学习笔记

发布日期: 2026-05-27 15:22:37

喜欢量: 0 个

阅读次数: 17

SimpleMDE Content Not Syncing to Textarea on Form Submit Problem After switching the admin articl

## Problem

After switching the admin article editor from Summernote (HTML WYSIWYG) to SimpleMDE (Markdown), clicking save on the article edit/add form appeared to do nothing — content changes in the editor were lost on save.

## Symptoms

- Clicking save on admin article edit form did nothing or saved stale content
- Content changes typed into SimpleMDE were missing after page reload
- The original `<textarea>` element had an outdated value at submission time

## What Didn't Work

- Changing the textarea `id` and `name` attributes — serialization was correct, but the timing of value sync was wrong
- Removing `data-rule="required"` — validation was not the blocker

## Solution

Two changes were needed to ensure the SimpleMDE editor content reaches the server:

1. **Enable `forceSync: true`** in the SimpleMDE constructor config so every editor change is automatically written back to the hidden original textarea:

```js
simplemde = new SimpleMDE({
    element: editor[0],
    spellChecker: false,
    forceSync: true  // syncs changes back to original textarea automatically
});
```

2. **Add a submit-button click handler** as a safety net to sync editor content right before form submission:

```js
$('.layer-footer [type=submit]').on('click', function () {
    if (typeof simplemde !== 'undefined' && simplemde) {
        editor.val(simplemde.value());
    }
});
```

## Why This Works

SimpleMDE replaces the original `<textarea>` with its own editor div and hides the original element. When the form is serialized via jQuery's `.serialize()`, it reads the hidden textarea's `.value` property. Without `forceSync: true`, SimpleMDE does not write editor changes back to the textarea — the form submits stale data.

The click handler provides an additional guarantee that the textarea is synced right before submission, covering edge cases where the async `require()` callback for SimpleMDE hasn't completed or where `forceSync` auto-sync timing is uncertain.

## Prevention

- Always add `forceSync: true` when initializing SimpleMDE on a form textarea
- Add a submit-button click handler that explicitly syncs editor content to the underlying textarea as a safety net
- Verify form submissions via browser devtools Network tab — inspect the POST payload to confirm the content field contains the expected value

## Related Issues

- `public/assets/js/backend/article/articles.js` — SimpleMDE initialization and submit sync
- `app/admin/view/article/articles/edit.html` — textarea element (`#content-editor`)
- `app/admin/view/article/articles/add.html` — same fix applied to add form

admin

https://www.amtb.info/show/NDA4

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !