fix(core): 修复readOnly模式下可以编辑表格等组件的问题

wowlusitong · Apr 9, 2019 · f9b3808 · f9b3808
1 parent 112d0b2
commit f9b3808
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/core/src/scripts/components/ReEditor.js b/packages/core/src/scripts/components/ReEditor.js
@@ -82,12 +82,13 @@ export default class ReEditor extends React.Component {
 
   renderNode = (props, editor, next) => {
     const { children, node, attributes, ...rest } = props;
+    const { readOnly } = this.props;
     const type = node.type;
 
     const Component = nodes[type];
     if (Component) {
       return (
-        <NodeWrapper editor={editor} node={node} {...rest}>
+        <NodeWrapper readOnly={readOnly} editor={editor} node={node} {...rest}>
           <Component node={node} editor={editor} {...attributes}>
             {children}
           </Component>

diff --git a/packages/core/src/scripts/components/wrappers/NodeWrapper.js b/packages/core/src/scripts/components/wrappers/NodeWrapper.js
@@ -11,10 +11,12 @@ import { isIgnoreWrapper } from '~/utils/utils';
   onChangeData
 }))
 @withProps(props => {
-  const { data, node, isSelected } = props;
+  const { data, node, isSelected, readOnly } = props;
   return {
     Tool: tools[node.type],
-    isSelected: data.getIn([node.key, 'isSelected'], isSelected)
+    isSelected: readOnly
+      ? false
+      : data.getIn([node.key, 'isSelected'], isSelected)
   };
 })
 export default class NodeWrapper extends React.Component {

diff --git a/packages/re-editor/src/scripts/ReEditor.js b/packages/re-editor/src/scripts/ReEditor.js
@@ -24,7 +24,7 @@ export default class ReEditor extends React.Component {
   };
 
   render() {
-    const { placeholder } = this.props;
+    const { placeholder, readOnly } = this.props;
     const { value } = this.state;
 
     return (
@@ -38,8 +38,13 @@ export default class ReEditor extends React.Component {
           ref={this.editor}
           value={value}
           onChange={this.handleChange}
+          readOnly={readOnly}
         />
       </div>
     );
   }
 }
+ReEditor.defaultProps = {
+  placeholder: '请输入内容',
+  readOnly: false
+};