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> |