vue2-ace-editor与el-dialog使用时,无法及时更新编辑器的内容

问题

如果在el-dialog中使用vue2-ace-editor,在第二次弹出的时候,如果编辑器的内容发生了变化,但是编辑器并没有正确的更新,需要点击一下编辑器才能成功更新到。

原因

由于ace编辑器是jquery的库,它本身的库并不是根据数据驱动来设计,所以数据变化之后,编辑器不一定能正确出现,是因为库本身做了一些限制。所以,我们需要在源码上找到问题所在。

el-dialog异常

问题只有在弹框内使用,并且二次展示的时候才会出现异常。

在这里插入图片描述
从经验分析,vue2-ace-editor应该是正确设置到值了,但是没有更新到ace编辑器的HTML内容。

v-show的问题?

由于性能考虑,el-dialog在初始化完之后,使用的是v-show来隐藏节点,所以ace编辑器不会触发第二次mounted事件。
一起来看看是不是v-show才导致问题出现。

v-show与v-if的区别
v-if会销毁节点,而v-show只是通过css来隐藏节点。

在这里插入图片描述

追根溯源ACE源码:不更新的真正原因

通过一番源码阅读,终于发现了真正问题所在。
ACE中的VirtualRenderer中的更新节点的回调函数中:$renderChanges
在这里插入图片描述
如果编辑器的宽度为0时,则不更新HTML内容。
由于v-show导致节点编辑器的长宽都是为0,所以才导致了编辑器的内容更新之后,但是编辑器的HTML内容并没有更新。

解决方法

  1. 修改ace库的方法,去除这个编辑器宽度为0的限制。
  2. 在业务组件中,使用v-if手动重置编辑器。
  3. 修改vue2-ace-editor,监听编辑器的宽度变化,如果发生了变化则手动设置内容。
    这里简述下方法三,可以使用ResizeObserver来监听编辑器的offsetWidth是否发生变化,发生变化之后,重新setValue,这里我放出我二次封装的组件,大家可以参考看看。
    这个方法的缺点是:ResizeObserver在所有IE都不支持,并且这个是实验性的API,大家在业务组件使用时,需要自己根据项目进行取舍。MDN文档ResizeObserver
    // 这里需要提前引入
    let ace = require('brace');
    require('brace/theme/chrome');
    require('brace/ext/language_tools');
    // 格式化
    require('brace/snippets/json');
    require('brace/snippets/html');
    require('brace/snippets/javascript');
    require('brace/snippets/xml');
    // 引入格式文件
    require('brace/mode/html');
    require('brace/mode/json');
    require('brace/mode/javascript');
    require('brace/mode/xml');
    
    // language
    export default {
      render(h) {
        const height = this.height ? this.px(this.height) : '100%';
        const width = this.width ? this.px(this.width) : '100%';
        return h('div', {
          attrs: {
            style: `height: ${height}; width: ${width}`,
          },
          ref: 'editor',
        });
      },
    
      props: {
        value: {
          type: String,
          default: '',
        },
        lang: true,
        theme: String,
        height: true,
        width: true,
        options: Object,
        readOnly: false,
      },
    
      data() {
        return {
          editor: null,
          contentBackup: '',
        };
      },
      watch: {
        readOnly: {
          immediate: false,
          handler(v) {
            this.editor.setReadOnly(v);
          },
        },
        value(val) {
          if (this.contentBackup !== val) {
            this.editor.setValue(val, 1);
            this.contentBackup = val;
          }
        },
        theme(newTheme) {
          this.editor.setTheme(`ace/theme/${newTheme}`);
        },
        lang(newLang) {
          this.editor
            .getSession()
            .setMode(typeof newLang === 'string' ? `ace/mode/${newLang}` : newLang);
        },
        options(newOption) {
          this.editor.setOptions(newOption);
        },
        height() {
          this.$nextTick(() => {
            this.editor.resize();
          });
        },
        width() {
          this.$nextTick(() => {
            this.editor.resize();
          });
        },
    
      },
      beforeDestroy() {
        this.editor.destroy();
        this.editor.container.remove();
      },
      mounted() {
        if (!ace) {
          ace = window.ace;
        }
        const vm = this;
    
        vm.editor = ace.edit(this.$el);
    
        const { editor } = vm;
        editor.$blockScrolling = Infinity;
        this.$emit('init', editor);
        this.setLang();
        this.setTheme();
    
        this.contentBackup = this.value;
    
        editor.on('change', () => {
          const content = editor.getValue();
          vm.$emit('input', content);
          vm.contentBackup = content;
        });
    	// 监听事件
        if (this.$refs.editor) {
          const observe = new ResizeObserver((_el) => {
            const { target } = _el[0];
            if (target && target.offsetWidth) {
              this.editor.resize();
            }
          });
          observe.observe(this.$refs.editor);
        }
    
        if (vm.options) editor.setOptions(vm.options);
    
        this.$emit('input', vm.textFormat(vm.value));
        if (vm.value) editor.setValue(vm.value, 1);
        vm.editor.setReadOnly(vm.readOnly);
      },
      methods: {
        px(n) {
          if (/^\d*$/.test(n)) {
            return `${n}px`;
          }
          return n;
        },
        setLang() {
          const { editor } = this;
          const lang = this.lang || 'text';
          editor.getSession().setMode(typeof lang === 'string' ? `ace/mode/${lang}` : lang);
        },
        setTheme() {
          const theme = this.theme || 'chrome';
          this.editor.setTheme(`ace/theme/${theme}`);
        },
      },
    };
    
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值