Tutorial sharing on creating multiple ueditor instances in vue

This article mainly introduces you to the relevant information on how to create multiple ueditors in Vue. The article introduces it in great detail through sample code. It has certain reference and learning value for everyone's study or work. Friends who need it follow below. Let’s learn together. Hope it helps everyone.

Preface

Some time ago, the company's Vue.js project needed to use the UEditor rich text editor. I searched around on Baidu and found no detailed instructions, so I decided to try it myself. , finally got it done after a busy day.

ueditor is Baidu editor, official website address: http://ueditor.baidu.com/website/

For complete function demonstration, you can refer to: http://ueditor.baidu.com /website/onlinedemo.html

I recently requested an upgrade at work and needed to create multiple ueditor instances in vue. I used neditor, which actually beautified the ueditor style. The rest is almost the same as ueditor. I won’t say anything below. Enough said, let’s take a look at the detailed introduction.

Screenshot

Instructions

Download the ueditor or neditor source code and copy it to the static directory

Then modify the ueditor.config.js configuration file

Add ueditor reference in the main.js of the vue project

Create 3 new pages home, tab1, tab2. tab1 and tab2 are sub-pages under home

##Be sure to add the keep-alive component and transition component outside the router-view, otherwise the ueditor instance cannot be saved

Create a new editor under the components folder as a public component of the editor

Call the editor in tab1, and pass in an id and accept it on the editor page. Note that if multiple instances are needed, the ids must not be the same.

 <template>
 <p>
 <editor></editor>
 <button>获取内容</button>
 </p>
<p>
 <span>当前富文本编辑器内容是: {{content}}</span>
 </p>
 
 </template>

 <script>
 import Editor from &#39;@/components/editor&#39;
 export default {
 name: &#39;tab1&#39;,
 components: { Editor },
 data() {
 return {
 content:&#39;&#39;
 }
 },
 methods: {
 //获取内容
 getContent(){
 this.content = this.$refs.editor.content
 }
 }
 }
 </script>

 <style>
 .m-t-10{
 margin-top: 10px;
 }
 </style>

Editor page code, because we apply keep-alive in router-view, so the initialization of ueditor must be placed in activated,

Ensure that ueditor will be re-rendered every time you enter the page, in deactivated Call ueditor's destroy method to ensure that the editor instance
will be destroyed every time you leave the page, so that multiple ueditor instances can be rendered, and the editor content can be saved every time you switch.

If multiple tabs only require one instance, please call the reset() method

 <template>
 <p>
 </p>
<p></p>
 
 </template>

 <script>
 export default {
 name: &#39;editor&#39;,
 props: [&#39;id&#39;],
 data() {
 return {
 ue: &#39;&#39;, //ueditor实例
 content: &#39;&#39;, //编辑器内容
 }
 },
 methods: {
 //初始化编辑器
 initEditor() {
 this.ue = UE.getEditor(this.id, {
 initialFrameWidth: &#39;100%&#39;,
 initialFrameHeight: &#39;350&#39;,
 scaleEnabled: true
 })
 //编辑器准备就绪后会触发该事件
 this.ue.addListener(&#39;ready&#39;,()=>{
 //设置可以编辑
 this.ue.setEnabled()
 })
 //编辑器内容修改时
 this.selectionchange()
 },
 //编辑器内容修改时
 selectionchange() {
 this.ue.addListener(&#39;selectionchange&#39;, () => {
 this.content = this.ue.getContent()
 })
 }
 },
 activated() {
 //初始化编辑器
 this.initEditor()
 },
 deactivated() {
 //销毁编辑器实例，使用textarea代替
 this.ue.destroy()
 //重置编辑器，可用来做多个tab使用同一个编辑器实例
 //如果要使用同一个实例,请注释destroy()方法
 //this.ue.reset()
 }
 }
 </script>

Have you learned this? Hurry up and try it out.

Related recommendations:

Easyui ueditor cannot edit problem integration

##ueditor editor usage graphic tutorial

10 recommended articles about ueditor editor

The above is the detailed content of Tutorial sharing on creating multiple ueditor instances in vue. For more information, please follow other related articles on the PHP Chinese website!