jeecgboot 可编辑表格弹窗富文本框

        最近使用jeecgboot框架的JEditableTable做一个数据维护，有一个需求是用户要录入SQL语句，帮他顺序执行SQL，由于SQL又臭又长，小小的input框没办法显示全，导致每次需要在txt里编辑好了再贴进去，修改也是一样。

       如图，只能显示几个字，多了就看不到了。

        于是乎，测试的胖子提出需求，需要点击弹出一个框，完全显示编辑内容。

        实现步骤：

1. 给可编辑表格特定类型的框添加事件监听，不能影响可编辑表格现有的功能
2. 做一个模态框组件，用于显示和编辑
3. 完善父页面和模态框组件之间的数据通信

        直接上代码：

源码里没有点击事件，需要自己加

 源码里增加一个处理函数，用于父子组件传值

 父组件中的column，增加使能点击事件的属性

 父组件监听子组件的事件

父组件处理子组件传过来的数据

最后再新建一个弹窗页面即可

这里使用了compute，用于防止子组件直接修改父组件的值

 
<script>
  import store from '@/store'
  import { mapGetters } from 'vuex'
  import { getAction, postAction, getFileAccessHttpUrl } from '@/api/manage'
  import moment from 'moment'
 
  export default {
    name: 'FckEditerDialog',
    components: {},
    props: {
      paramData: {
        type: String,
        default: ''
      },
    },
    computed: {
      paramCopy: {
        get() {
          return this.paramData
        },
        set(val) {
          this.$emit('saveContentInfo', val)   
        }
      }
    },
    data () {
      return {
        title:'编辑器',
        width:896,
        visible: false,
        disableSubmit: false,
        usercode: '',
        userId: '',
        execProcess: '',
      }
    },
    created() {
      this.userId = this.userInfo().id;
    },
    mounted() {
    },
    destroyed: function () {
    },
    methods: {
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      add () {
        this.execProcess = '';
        this.visible=true
      },
      edit (record) {
        this.visible=true
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$emit('close');
        this.visible = false;
        // let data = this.paramData
        // this.$emit('saveContentInfo', data);
        // this.paramData = '';
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
        this.visible = false;
      },
    }
  }
script>

 效果图：

全屏效果

这样保存后会有很多HTML后台处理的时候需要去除，附上工具类：

public class FckEditorUtil {
 
    public static Pattern p = Pattern.compile("\\s*|\t|\r|\n|");
 
    /**
     * 去掉字符串中的 \t \r \n
     * 
     * param str
     *
     * @return
     * @author Rex
     */
    public static String replaceBlank(String str) {
        String dest = "";
        if (str != null) {
            Matcher m = p.matcher(str);
            dest = m.replaceAll("");
        }
        return dest;
    }
 
 
    /**
     * 删除Html标签
     * 
     * param inputString
     *
     * @return
     * @author Rex
     */
    public static String removeHtmlTag(String inputString) {
        if (inputString == null) {
            return null;
        }
        String htmlStr = inputString; // 含html标签的字符串
        String textStr = "";
        try {
            //定义script的正则表达式{或]*?>[\\s\\S]*?<\\/script>
            String regEx_script = "<[\\s]*?script[^>]*?>[\\s\\S]*?<[\\s]*?\\/[\\s]*?script[\\s]*?>";
            //定义style的正则表达式{或]*?>[\\s\\S]*?<\\/style>
            String regEx_style = "<[\\s]*?style[^>]*?>[\\s\\S]*?<[\\s]*?\\/[\\s]*?style[\\s]*?>";
            // 定义HTML标签的正则表达式
            String regEx_html = "<[^>]+>";
            // 定义一些特殊字符的正则表达式 如：     
            String regEx_special = "\\&[a-zA-Z]{1,10};";
            textStr = getString(htmlStr, regEx_script, regEx_style, regEx_html, regEx_special);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return textStr;// 返回文本字符串
    }
 
    private static String getString(String htmlStr, String... args) {
        Pattern p_script;
        Matcher m_script;
        for (String regEx: args) {
            p_script = Pattern.compile(regEx, Pattern.CASE_INSENSITIVE);
            m_script = p_script.matcher(htmlStr);
            htmlStr = m_script.replaceAll(" "); // 过滤
        }
        return htmlStr;
    }
 
}