Merge pull request #9079 from sqzhou/fix/richtext/bug

fix: 修复rich-text更新挂载异常问题
This commit is contained in:
Allen 2023-12-08 17:01:22 +08:00 committed by GitHub
commit 2ae514474f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 12 deletions

View File

@ -5,6 +5,7 @@
*/
import React from 'react';
import isEqual from 'lodash/isEqual';
// @ts-ignore
import FroalaEditor from 'froala-editor';
@ -93,11 +94,10 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
}
componentDidUpdate(prevProps: Readonly<FroalaEditorComponentProps>) {
if (this.props.config !== prevProps.config) {
this.editor?.destroy();
this.config = this.clone(this.props.config || this.config);
this.config = {...this.config};
this.editor = new FroalaEditor(this.element, this.config);
if (!isEqual(this.props.config, prevProps.config)) {
this.destroyEditor();
this.createEditor();
return;
}
if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {

View File

@ -42,6 +42,7 @@ import 'tinymce/plugins/help/js/i18n/keynav/en';
import 'tinymce/plugins/help/js/i18n/keynav/de';
import {LocaleProps, autobind} from 'amis-core';
import isEqual from 'lodash/isEqual';
interface TinymceEditorProps extends LocaleProps {
model: string;
@ -84,7 +85,7 @@ export default class TinymceEditor extends React.Component<TinymceEditorProps> {
this.editor?.setContent((this.currentContent = props.model || ''));
}
if (this.props.config !== prevProps.config) {
if (!isEqual(this.props.config, prevProps.config)) {
tinymce.remove(this.editor);
this.initTiny();
}

View File

@ -7,6 +7,7 @@ import {
resolveEventData,
autobind
} from 'amis-core';
import isEqual from 'lodash/isEqual';
import cx from 'classnames';
import {LazyComponent} from 'amis-core';
import {normalizeApi} from 'amis-core';
@ -124,18 +125,20 @@ export default class RichTextControl extends React.Component<
if (finnalVendor === 'froala') {
if (
anyChanged(
['options', 'editorClass', 'placeholder', 'buttons'],
prevProps,
props
)
!isEqual(prevProps.options, props.options) ||
!isEqual(prevProps.editorClass, props.editorClass) ||
!isEqual(prevProps.placeholder, props.placeholder) ||
!isEqual(prevProps.buttons, props.buttons)
) {
this.setState({
config: this.getConfig(props)
});
}
} else if (finnalVendor === 'tinymce') {
if (anyChanged(['options', 'fileField'], prevProps, props)) {
if (
!isEqual(prevProps.options, props.options) ||
!isEqual(prevProps.fileField, props.fileField)
) {
this.setState({
config: this.getConfig(props)
});