Use in modal box, When I modify the content and reopen it, all content will lose some text style

[ChaselX]

不好意思，需要描述的内容文字较多，英文很烂，所以用中文表述问题

我把编辑器用在了一个可复用的模块框中，编辑器的内容会根据事件绑定的数据动态赋值。

<button type="button" class="btn btn-primary" @click="editTemplate(item)">修改</button>

    editTemplate: function (item) {
        var obj = {};
        $.extend(obj, item);
        Vue.set(vModel.entityForm, "entity", obj)
        vModel.entityForm.showModal = true;
    },

可重现问题描述如下：

1. 刷新页面后第一次打开时，样式正常显示，不编辑直接关闭模态框，点击任意一个修改按钮（不同数据）弹出模态框，样式仍正常显示。
2. 如果编辑内容并关闭模态框（未保存，数据重新加载），点击模板列表任意一个修改，弹出的内容均会丢失部分样式。

传值给编辑器以后用console.log()打印的内容：

传进去是传对了，但是用Vue watch钩子观察编辑器content内容，发现传入后又发生了一次变化：

    "entityForm.entity.content":function (val,oldVal) {
        console.log(val);
    }

样式传入content后确实丢失了：

不知道怎么才能解决这个问题于是向您请教一下，项目的引入是遵照cdn demo的方式引入的style与js。运行过程中chrome 的F12控制台无报错。

Problem Description（Google Translation）：

I am sorry, need to describe the contents of the text more, poor English, so use Chinese to describe the problem

I use the editor in a reusable module box, the contents of the editor will be dynamically assigned according to the data bound to the event.

! [image] (https://user-images.githubusercontent.com/19153662/35503108-17f5f0a8-051a-11e8-90df-c1fe1d31a39f.png)

<button type =" button "class =" btn btn-primary "@ click =" editTemplate (item) "> Edit </ button>

    editTemplate: function (item) {
        var obj = {};
        $ .extend (obj, item);
        Vue.set (vModel.entityForm, "entity", obj)
        vModel.entityForm.showModal = true;
    },

! [image] (https://user-images.githubusercontent.com/19153662/35503547-6811f46e-051b-11e8-9f78-b1641862cb19.png)

The reproducible problem is described as follows:

1. When the page is opened for the first time after the page is refreshed, the style is displayed normally. If you do not edit it, you can directly turn off the modal box and click any of the modifier buttons (different data) to pop up the modal box . The style is still displayed normally.
2. If edit content and close the modal box (not saved, data reload) , click on the template list to modify any one, the pop-up content will be lost part of the style.

! [image] (https://user-images.githubusercontent.com/19153662/35503576-833cb21a-051b-11e8-9b55-e0d17b2d0018.png)

Value passed to the editor after using console.log () print content:

! [image] (https://user-images.githubusercontent.com/19153662/35503964-9d10c428-051c-11e8-9889-053ddefe6389.png)

Passing in is passed, but using the Vue watch hook to view the content of the editor's content, we see that a change has taken place:

    "entityForm.entity.content": function (val, oldVal) {
        console.log (val);
    }

The style is actually missing content:

! [image] (https://user-images.githubusercontent.com/19153662/35504225-75de212e-051d-11e8-865a-e8d6e6aa791c.png)

I do not know how to solve this problem so ask you, the introduction of the project is to follow the way cdn demo introduced style and js. Chrome F12 console no error during operation.

[ChaselX]

补充更正

前面描述的有些问题，不修改就点开其他文本样式不会消失是错的，因为传入的content和原content相同所以样式才会保持。 如果前后两次赋值给editor的文本内容不相同，即使不修改，点开样式也会直接消失。

[surmon-china]

首先要排除，组件本身与模态框组件本身的关系； 如果在普通一个子组件中，不断被释放重新初始化，没有这一类bug，那摸极有可能与模态框的渲染周期有关。

你可以简单尝试：确保在模态框打开时才让 quill-editor 组件进行渲染，模态框关闭时（无论是销毁或隐藏），编辑器组件务必要被销毁。

[ChaselX]

确实是这样