eWebEditor首页 >> eWebEditor国产化专用版 V2.2 >> 开发手册 >> 集成调用 >> 在Vue中使用EwebEditor组件

3.3.7.5 组件的接口方法

您可以在编辑器实例化后,调用编辑器自带的接口方法。具体的接口有哪些,在【Javascript API】章节,有详细的接口方法说明。

 

要使用组件的接口方法,先要获取组件实例对象。

示例1,通过this.$refs 来获取对象:

<template>

  <EwebEditor ref="ewebeditor1" style="style:coolblue;width:550px;height:350px"></EwebEditor>

  <button @click="doGetHTML">获取当前编辑内容</button>

</template>

 

<script>

export default {

  name: 'xxx',

  methods:{

doGetHTML(){

      // 使用this.$refs 来获取实例对象

      var editor = this.$refs.ewebeditor1.instance;

// 调用getHTML()接口方法,获取当前编辑的数据。

      var s_Html = editor.getHTML();

      console.log(s_Html);

      // 获取实例化id

      var s_InstanceId = editor.id;

      console.log(s_InstanceId);

    }

  }

}

</script>

 

示例2,通过实例化id 来获取对象:

<template>

  <EwebEditor style="id:ewebeditor1;style:coolblue;width:550px;height:350px"></EwebEditor>

  <button @click="doGetHTML">获取当前编辑内容</button>

</template>

 

<script>

export default {

  name: 'xxx',

  methods:{

doGetHTML(){

      // 使用实例化id 来获取实例对象

      var editor = EWEBEDITOR.Instances['ewebeditor1'];

// 调用getHTML()接口方法,获取当前编辑的数据。

      var s_Html = editor.getHTML();

      console.log(s_Html);

    }

  }

}

</script>

 

方法列表:

方法原型

说明

s_Html = editor.getHTML()

获取编辑器数据,HTML格式字符串

editor.setHTML(s_Html)

设置编辑器数据,HTML格式字符串

n = editor.getCount()

获取内容字数

……

更多请参见【Javascript API】章节

还可以使用全局的 EWEBEDITOR 对象方法,详见【EWEBEDITOR对象参考】章节。