eWebEditor首页 >> eWebEditor帮助文档 V15.3 >> 开发手册 >> 集成调用 >> 在Vue中使用EwebEditor组件

3.3.7.3 在模板中调用组件

在您需要用到编辑器的组件中,加入如下代码,即可在需要的位置加入编辑器组件,编辑器组件和普通<input>输入组件类似,可以赋值、取值、单向绑定、双向绑定、各种参数设置和事件回调。

 

最简调用模型示例:

如下,此时创建一个空的编辑器,所有设置按默认:

<template>

    <EwebEditor></EwebEditor>

</template>

 

常用属性固定值调用示例:

value: 编辑器所编辑的数据,HTML格式。

config: 编辑器的参数配置,支持字符型和对象型定义。

backendurl: 编辑器后端程序路径,用于取配置和上传文件等交互。

<template>

    <EwebEditor value="<p>初始值</p>" config="style:coolblue;width:550px;height:350px" backendurl="http://后端/ewebeditor/"></EwebEditor>

</template>

 

单向绑定调用示例:

说明:此时的config属性,可以是对象格式,也可以是字符串格式。

<template>

  <EwebEditor :value="editorValue" :config="editorConfig" :backendurl="editorBackendurl"></EwebEditor>

</template>

 

<script>

export default {

  name: 'xxx',

  data(){

    return{

      editorValue: '<p>编辑内容</p>',

      editorConfig:{

        style:'standard600',

        width:'100%',

        height:'350px'

      },

      editorBackendurl: 'http://后端/ewebeditor/'

    }

  },

  methods:{

    //

  }

}

</script>

 

 

双向绑定调用示例:

编辑的数据,value属性,支持双向绑定。

 

Vue2示例:

<template>

  <EwebEditor v-model="editorValue"></EwebEditor>

</template>

以上代码相当于如下代码:

<template>

  <EwebEditor :value="editorValue" @input="newValue => editorValue = newValue"></EwebEditor>

</template>

 

Vue3示例:

<template>

  <EwebEditor v-model:value="editorValue"></EwebEditor>

</template>

以上代码相当于如下代码:

<template>

  <EwebEditor :value="editorValue" @update:value="newValue => editorValue = newValue"></EwebEditor>

</template>