看板编辑界面富文本编辑器交互调整/数据源过滤正则字符转义

src/components/dashboardDesigner/chartView.jsx

@@ -9,7 +9,6 @@ const ChartView = ({ item, chart, editMode, dispatch }) => {
     const { viewType, chartCode, content } = item;
     let children = <div className='chart-default mover'></div>;
 
-    console.log(editMode);
     if(viewType === 'chart') { // 图表类型
         let targetChart = chart.list.filter(c => c.code === chartCode)[0];
         if(targetChart) {

src/components/dashboardDesigner/richTextEditor.jsx

@@ -2,6 +2,14 @@ import React, { Component } from 'react';
 import E from 'wangeditor'
 
 class RichTextEditor extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = ({
+            _html: props.content
+        });
+    }
+
     render() {
         return (
             <div className='richtexteditor' ref="editorElem"></div>
@@ -11,8 +19,16 @@ class RichTextEditor extends Component {
         const { content, onContentChange } = this.props;
         const elem = this.refs.editorElem;
         const editor = new E(elem);
-        editor.customConfig.onchange = onContentChange; // 使用 onchange 函数监听内容的变化
+        editor.customConfig.onchange = (html) => {
+            const { _html } = this.state;
+            if(_html !== html) { // 只有实际内容发生改变才触发model的修改
+                onContentChange(html);
+            }
+        }; // 使用 onchange 函数监听内容的变化
         editor.customConfig.onfocus = () => {
+            this.setState({
+                _html: editor.txt.html()
+            });
             let toolbar = elem.getElementsByClassName('w-e-toolbar')[0];
             toolbar.style.display = 'flex';
         }; // 获得焦点时显示工具栏（需要计算位置）
@@ -22,6 +38,7 @@ class RichTextEditor extends Component {
         }
         editor.customConfig.uploadImgShowBase64 = true; // 上传图片（base64）
         editor.create()
+        // editor.blur();
         editor.txt.html(content);
     }
 }

src/components/datasource/dataSource.jsx

@@ -62,9 +62,11 @@ class DataSource extends React.Component {
     }
 
     onSearch(list, text) {
+        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
+        let filterLabel = (text || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         return list.map(l => {
             let o = Object.assign({}, l);
-            let reg = new RegExp('('+ text +'){1}', 'ig');
+            let reg = new RegExp('('+ filterLabel +'){1}', 'ig');
             if(o.name && o.name.search(reg) !== -1) {
                 return o;
             }else if(o.description && o.description.search(reg) !== -1) {
@@ -309,7 +311,7 @@ class DataSource extends React.Component {
                 return (
                     <span>
                         { filterLabel ?
-                            (text.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                            ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                 return (
                                     fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                     <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :