<template>
|
<div class="mod-demo-ueditor">
|
<el-alert
|
title="提示："
|
type="warning"
|
:closable="false">
|
<div slot-scope="description">
|
<p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
|
<p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
|
</div>
|
</el-alert>
|
|
<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
|
|
<!-- 获取内容 -->
|
<p><el-button @click="getContent()">获得内容</el-button></p>
|
<el-dialog
|
title="内容"
|
:visible.sync="dialogVisible"
|
:append-to-body="true">
|
{{ ueContent }}
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ueditor from 'ueditor'
|
export default {
|
data () {
|
return {
|
ue: null,
|
ueId: `J_ueditorBox_${new Date().getTime()}`,
|
ueContent: '',
|
dialogVisible: false
|
}
|
},
|
mounted () {
|
this.ue = ueditor.getEditor(this.ueId, {
|
// serverUrl: '', // 服务器统一请求接口路径
|
zIndex: 3000
|
})
|
},
|
methods: {
|
getContent () {
|
this.dialogVisible = true
|
this.ue.ready(() => {
|
this.ueContent = this.ue.getContent()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.mod-demo-ueditor {
|
position: relative;
|
z-index: 510;
|
> .el-alert {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
