<h1 id="articleHeader0">简介</h1> <blockquote><p>在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ueditor几乎一样</p></blockquote> <h1 id="articleHeader1">截图</h1> <p><span class="img-wrap"><img data-src="/img/bVYsl5?w=1353&amp;h=627" src="/img/bVYsl5?w=1353&amp;h=627" alt="show.gif" title="show.gif" style="cursor: pointer; display: inline;"></span></p> <h1 id="articleHeader2">源码地址</h1> <p><a href="https://github.com/oblivioussing/vue-ueditor-multi" rel="nofollow noreferrer" target="_blank">https://github.com/obliviouss...</a></p> <h1 id="articleHeader3">说明</h1> <p>下载ueditor或neditor源码,拷贝到static目录下面</p> <p><span class="img-wrap"><img data-src="/img/bVYsmz?w=236&amp;h=422" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="in-static.png" title="in-static.png" style="cursor: pointer;"></span></p> <p>然后修改ueditor.config.js配置文件</p> <p><span class="img-wrap"><img data-src="/img/bVYsmI?w=647&amp;h=436" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="config.png" title="config.png" style="cursor: pointer;"></span></p> <p>在vue项目的main.js添加ueditor引用</p> <p><span class="img-wrap"><img data-src="/img/bVYsmN?w=658&amp;h=442" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="vue-main.png" title="vue-main.png" style="cursor: pointer;"></span></p> <p>新建3个页面 home,tab1,tab2。tab1和tab2是home下面的子页面</p> <p><span class="img-wrap"><img data-src="/img/bVYsmV?w=825&amp;h=619" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="vue-home.png" title="vue-home.png" style="cursor: pointer;"></span></p> <p>在router-view外面一定要添加keep-alive组件和transition组件,不然ueditor实例无法保存</p> <p>在components文件夹下面新建一个editor作为编辑器的公共组件</p> <p>在tab1中调用editor,同时要传入一个id并在editor页面接受,注意如果需要多个实例,id一定不能相同</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <template></p> <div> <editor ref=&quot;editor&quot; id=&quot;tab1Editor&quot;></editor><br /> <button @click=&quot;getContent&quot; class=&quot;m-t-10&quot;>获取内容</button></p> <div> <span>当前富文本编辑器内容是: {{content}}</span> </div> </p></div> <p> </template></p> <p> <script> import Editor from '@/components/editor' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'tab1', components: { Editor }, data() { return { content:'' } }, methods: { //获取内容 getContent(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.content = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.editor.content } } } </script></p> <style scoped> .m-t-10{ margin-top: 10px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> &lt;template&gt; &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt; &lt;editor ref=<span class="hljs-string">"editor"</span> id=<span class="hljs-string">"tab1Editor"</span>&gt;&lt;/editor&gt; &lt;button @click=<span class="hljs-string">"getContent"</span> class=<span class="hljs-string">"m-t-10"</span>&gt;获取内容&lt;/button&gt; &lt;div&gt; &lt;span&gt;当前富文本编辑器内容是: {{content}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Editor from <span class="hljs-string">'@/components/editor'</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> default { name: <span class="hljs-string">'tab1'</span>, components: { Editor }, <span class="hljs-function"><span class="hljs-title">data</span></span>() { <span class="hljs-built_in">return</span> { content:<span class="hljs-string">''</span> } }, methods: { //获取内容 <span class="hljs-function"><span class="hljs-title">getContent</span></span>(){ <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.content = this.<span class="hljs-variable">$refs</span>.editor.content } } } &lt;/script&gt; &lt;style scoped&gt; .m-t-10{ margin-top: 10px; } &lt;/style&gt;</code></pre> <p>editor页面代码,因为我们在router-view套用了keep-alive,所以ueditor的初始化一定要放在activated里面,<br />确保每次进入页面都会重新渲染ueditor,在deactivated里面调用ueditor的destroy方法,确保每次离开页面的时候<br />会销毁编辑器实例,这样就可以渲染多个ueditor实例了,并且每次切换都能保存编辑器的内容。</p> <p>如果多个tab只需要一个实例请调用reset()方法</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <template></p> <div> <div :id=&quot;this.id&quot;></div> </p></div> <p> </template></p> <p> <script> export default { name: 'editor', props: ['id'], data() { return { ue: '', //ueditor实例 content: '', //编辑器内容 } }, methods: { //初始化编辑器 initEditor() { this.ue = UE.getEditor(this.id, { initialFrameWidth: '100%', initialFrameHeight: '350', scaleEnabled: true }) //编辑器准备就绪后会触发该事件 this.ue.addListener('ready',()=>{ //设置可以编辑 this.ue.setEnabled() }) //编辑器内容修改时 this.selectionchange() }, //编辑器内容修改时 selectionchange() { this.ue.addListener('selectionchange', () => { this.content = this.ue.getContent() }) } }, activated() { //初始化编辑器 this.initEditor() }, deactivated() { //销毁编辑器实例,使用textarea代替 this.ue.destroy() //重置编辑器,可用来做多个tab使用同一个编辑器实例 //如果要使用同一个实例,请注释destroy()方法 //this.ue.reset() } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> &lt;template&gt; &lt;div&gt; &lt;div :id=<span class="hljs-string">"this.id"</span>&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; <span class="hljs-built_in">export</span> default { name: <span class="hljs-string">'editor'</span>, props: [<span class="hljs-string">'id'</span>], <span class="hljs-function"><span class="hljs-title">data</span></span>() { <span class="hljs-built_in">return</span> { ue: <span class="hljs-string">''</span>, //ueditor实例 content: <span class="hljs-string">''</span>, //编辑器内容 } }, methods: { //初始化编辑器 <span class="hljs-function"><span class="hljs-title">initEditor</span></span>() { this.ue = UE.getEditor(this.id, { initialFrameWidth: <span class="hljs-string">'100%'</span>, initialFrameHeight: <span class="hljs-string">'350'</span>, scaleEnabled: <span class="hljs-literal">true</span> }) //编辑器准备就绪后会触发该事件 this.ue.addListener(<span class="hljs-string">'ready'</span>,()=&gt;{ //设置可以编辑 this.ue.setEnabled() }) //编辑器内容修改时 this.selectionchange() }, //编辑器内容修改时 <span class="hljs-function"><span class="hljs-title">selectionchange</span></span>() { this.ue.addListener(<span class="hljs-string">'selectionchange'</span>, () =&gt; { this.content = this.ue.getContent() }) } }, <span class="hljs-function"><span class="hljs-title">activated</span></span>() { //初始化编辑器 this.initEditor() }, <span class="hljs-function"><span class="hljs-title">deactivated</span></span>() { //销毁编辑器实例,使用textarea代替 this.ue.destroy() //重置编辑器,可用来做多个tab使用同一个编辑器实例 //如果要使用同一个实例,请注释destroy()方法 //this.ue.reset() } } &lt;/script&gt;</code></pre>

本文固定链接: http://www.js-code.com/vue-js/vue-js_17081.html