在 keep-alive 的component中，引用 tinymce setContent工作不正常

[gtyang]

在 keep-alive 的component中，引用 tinymce，第一次component初始化，editor可以正常工作，当父组件隐藏后，再次打开时，editor 就不见了，好像是控件的高度成了0.

[gtyang]

查看生成的html，tinymce 对应的div 设置了 display: none;

有点不理解。

<div id="mceu_294" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px; width: 100%; display: none;"><div id="mceu_294-body" class="mce-container-body mce-stack-layout"><div id="mceu_295" class="mce-top-part mce-container mce-stack-layout-item mce-first"><div id="mceu_295-body" class="mce-container-body"><div id="mceu_296" class="mce-container mce-menubar mce-toolbar mce-first" role="menubar" style="border-width: 0px 0px 1px;"><div id="mceu_296-body" class="mce-container-body mce-flow-layout"><div id="mceu_297" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_297" role="menuitem" aria-haspopup="true"><button id="mceu_297-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">File</span> <i class="mce-caret"></i></button></div><div id="mceu_298" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_298" role="menuitem" aria-haspopup="true"><button id="mceu_298-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Edit</span> <i class="mce-caret"></i></button></div><div id="mceu_299" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_299" role="menuitem" aria-haspopup="true"><button id="mceu_299-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Insert</span> <i class="mce-caret"></i></button></div><div id="mceu_300" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_300" role="menuitem" aria-haspopup="true"><button id="mceu_300-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">View</span> <i class="mce-caret"></i></button></div><div id="mceu_301" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_301" role="menuitem" aria-haspopup="true"><button id="mceu_301-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Format</span> <i class="mce-caret"></i></button></div><div id="mceu_302" class="mce-widget mce-btn mce-menubtn mce-flow-layout-item mce-last mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_302" role="menuitem" aria-haspopup="true"><button id="mceu_302-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Table</span> <i class="mce-caret"></i></button></div></div></div><div id="mceu_303" class="mce-toolbar-grp mce-container mce-panel mce-last" hidefocus="1" tabindex="-1" role="group"><div id="mceu_303-body" class="mce-container-body mce-stack-layout"><div id="mceu_304" class="mce-container mce-toolbar mce-stack-layout-item mce-first" role="toolbar"><div id="mceu_304-body" class="mce-container-body mce-flow-layout"><div id="mceu_305" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group"><div id="mceu_305-body"><div id="mceu_262" class="mce-widget mce-btn mce-first" tabindex="-1" aria-pressed="false" role="button" aria-label="Bold"><button id="mceu_262-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bold"></i></button></div><div id="mceu_263" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Italic"><button id="mceu_263-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-italic"></i></button></div><div id="mceu_264" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Underline"><button id="mceu_264-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-underline"></i></button></div><div id="mceu_265" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Strikethrough"><button id="mceu_265-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-strikethrough"></i></button></div><div id="mceu_266" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align left"><button id="mceu_266-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignleft"></i></button></div><div id="mceu_267" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align center"><button id="mceu_267-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-aligncenter"></i></button></div><div id="mceu_268" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align right"><button id="mceu_268-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignright"></i></button></div><div id="mceu_269" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Decrease indent"><button id="mceu_269-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-outdent"></i></button></div><div id="mceu_270" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Increase indent"><button id="mceu_270-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-indent"></i></button></div><div id="mceu_271" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Blockquote"><button id="mceu_271-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-blockquote"></i></button></div><div id="mceu_272" class="mce-widget mce-btn mce-disabled" tabindex="-1" role="button" aria-label="Undo" aria-disabled="true"><button id="mceu_272-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-undo"></i></button></div><div id="mceu_273" class="mce-widget mce-btn mce-disabled" tabindex="-1" role="button" aria-label="Redo" aria-disabled="true"><button id="mceu_273-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-redo"></i></button></div><div id="mceu_274" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Clear formatting"><button id="mceu_274-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-removeformat"></i></button></div><div id="mceu_275" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Subscript"><button id="mceu_275-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-subscript"></i></button></div><div id="mceu_276" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Superscript"><button id="mceu_276-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-superscript"></i></button></div><div id="mceu_277" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Source code"><button id="mceu_277-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-code"></i></button></div><div id="mceu_278" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Insert/Edit code sample"><button id="mceu_278-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-codesample"></i></button></div></div></div></div></div><div id="mceu_306" class="mce-container mce-toolbar mce-stack-layout-item mce-last" role="toolbar"><div id="mceu_306-body" class="mce-container-body mce-flow-layout"><div id="mceu_307" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group"><div id="mceu_307-body"><div id="mceu_279" class="mce-widget mce-btn mce-first" tabindex="-1" role="button" aria-label="Horizontal line"><button id="mceu_279-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-hr"></i></button></div><div id="mceu_280" class="mce-widget mce-btn mce-splitbtn mce-menubtn" role="button" aria-pressed="false" tabindex="-1" aria-label="Bullet list" aria-haspopup="true"><button type="button" hidefocus="1" tabindex="-1"><i class="mce-ico mce-i-bullist"></i></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_281" class="mce-widget mce-btn mce-splitbtn mce-menubtn" role="button" aria-pressed="false" tabindex="-1" aria-label="Numbered list" aria-haspopup="true"><button type="button" hidefocus="1" tabindex="-1"><i class="mce-ico mce-i-numlist"></i></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_282" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit link"><button id="mceu_282-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-link"></i></button></div><div id="mceu_283" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit image"><button id="mceu_283-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-image"></i></button></div><div id="mceu_284" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Preview"><button id="mceu_284-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-preview"></i></button></div><div id="mceu_285" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Anchor"><button id="mceu_285-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-anchor"></i></button></div><div id="mceu_286" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Page break"><button id="mceu_286-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-pagebreak"></i></button></div><div id="mceu_287" class="mce-widget mce-btn mce-splitbtn mce-menubtn" role="button" tabindex="-1" aria-label="Insert date/time" aria-haspopup="true"><button type="button" hidefocus="1" tabindex="-1"><i class="mce-ico mce-i-insertdatetime"></i></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_288" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit media"><button id="mceu_288-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-media"></i></button></div><div id="mceu_289" class="mce-widget mce-btn mce-menubtn" tabindex="-1" aria-labelledby="mceu_289" role="button" aria-label="Table" aria-haspopup="true"><button id="mceu_289-open" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-table"></i> <i class="mce-caret"></i></button></div><div id="mceu_290" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Emoticons" aria-haspopup="true"><button id="mceu_290-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-emoticons"></i></button></div><div id="mceu_291" class="mce-widget mce-btn mce-splitbtn mce-colorbutton" role="button" tabindex="-1" aria-haspopup="true" aria-label="Text color"><button role="presentation" hidefocus="1" type="button" tabindex="-1"><i class="mce-ico mce-i-forecolor"></i><span id="mceu_291-preview" class="mce-preview"></span></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_292" class="mce-widget mce-btn mce-splitbtn mce-colorbutton" role="button" tabindex="-1" aria-haspopup="true" aria-label="Background color"><button role="presentation" hidefocus="1" type="button" tabindex="-1"><i class="mce-ico mce-i-backcolor"></i><span id="mceu_292-preview" class="mce-preview"></span></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_293" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Fullscreen"><button id="mceu_293-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-fullscreen"></i></button></div></div></div></div></div></div></div></div></div><div id="mceu_308" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><iframe id="vue-tinymce-1528206050095_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 400px; display: block;"></iframe></div><div id="mceu_309" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><div id="mceu_309-body" class="mce-container-body mce-flow-layout"><div id="mceu_310" class="mce-path mce-flow-layout-item mce-first"><div class="mce-path-item">&nbsp;</div></div><span id="mceu_313" class="mce-wordcount mce-widget mce-label mce-flow-layout-item">0 words</span><div id="mceu_311" class="mce-flow-layout-item mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div><span id="mceu_312" class="mce-branding mce-widget mce-label mce-flow-layout-item mce-last"> Powered by <a href="https://www.tinymce.com/?utm_campaign=editor_referral&amp;utm_medium=poweredby&amp;utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">tinymce</a></span></div></div></div></div>

[PanJiaChen]

可参考 https://github.com/PanJiaChen/vue-element-admin/issues/141

本项目也已经做了处理 https://github.com/PanJiaChen/vue-element-admin/blob/914a4ec62cef9c244153c46a2de2577190021a34/src/components/Tinymce/index.vue#L61-L66

[NBSeven]

activated() { this.initTinymce() }, deactivated() { this.destroyTinymce() }, 我也碰到了，就算销毁重新创建 再点击回来，也还是会displaynone，你这两个钩子原本就写在组件里了，他应该和我一样的。

[Mrli2016]

我也是遇到这情况 销毁后重新创建点击回来还是隐藏状态 多了个display:none属性 请问解决了吗 @PanJiaChen

[NBSeven]

我是换了一个富文本，vue-quill-editor https://github.com/surmon-china/vue-quill-editor 使用比较简单，支持绑定的。就是在组件内引用时要import { quillEditor } from 'vue-quill-editor' 否则会报错，具体还是看文档吧。 @Mrli2016

[Mrli2016]

@NBSeven 我已经查出原因了 tinymce在初始化时给依赖的text-area添加了display:none属性，但是在destroy()销毁后却没有清除这个属性 所以下次初始化时会把这个属性带到tinymce上。我现在的解决方法就是在销毁处理时将text-area的style属性销毁掉 但是我不知道为什么销毁的时候不会将text-area的display:none属性移除，我看element-admin的会自动移除。我现在将tinymce的版本升级到4.7.13了 也还是不会将添加的display:none属性移除掉 得自己手动移除。