最近在使用tinymce+iview+vue寫項目，在富文本編輯器配合彈框一起使用時，總是存在問題：彈框彈出的時候，富文本編輯器不能點擊，鼠標的光標也不能在編輯器里獲取焦點。

tinymce的問題.png

發(fā)現(xiàn)問題：

不知道是因為tinymce在modal之前創(chuàng)建了，還是因為前一個dom沒有銷毀，所以這個dom又創(chuàng)建，導致了存在多個dom，然后就無法鎖定唯一的dom節(jié)點。

解決辦法：

無論是哪種原因，總之我找到了解決辦法

方法1：給edit組件添加v-if，當form.content有值的時候創(chuàng)建富文本編輯器的dom節(jié)點，當form.content沒值的時候銷毀富文本編輯器的dom節(jié)點

            <editor
              ref="editorModle"
              @input="changeValue"
              :value="form.content"
              v-if="form.content"
            ></editor>

缺點：這種判斷方式，添加和編輯在同一頁面時，編輯的時候是正常的，添加的時候富文本編輯器就不見了。所以很難過

方法2：當modal顯示的時候，tinymce才創(chuàng)建

            <editor
              ref="editorModle"
              @input="changeValue"
              :value="form.content"
              v-if="handleModalVisible"
            ></editor>
        //handleModalVisible  是modal彈框綁定的值，當彈框出現(xiàn)的時候讓富文本編輯器也出現(xiàn)，彈框消失的同時也銷毀富文本編輯器

這個方法就很可愛啦，可以同時在同一個頁面添加和編輯~完美

成功.jpg

方法3：給edit組件增加key值

<editor ref="editorModle" @input="changeValue" :value="form.content" :key="editorKey"></editor>


//在點擊添加或者編輯按鈕的時候，給edit組件添加不同的key值，我是獲得當前毫秒數(shù)當做key值用的
this.editorKey = new Date().getTime();