Skip to content

E
ElectricitySheep
Commit f4c2ae81 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 60b16810
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 72 deletions
src/components/global/UE.vue
View file @ f4c2ae81
<template>
<div>
<script type="text/plain" id="editor"></script>
<script type="text/plain" :id="id"></script>
<!-- 选择图片 -->
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
......@@ -14,10 +14,13 @@
ChooseImg
},
name: 'UE',
data () {
data() {
return {
id: 'editor' + (Math.floor((Math.random() * 10000) + 1)),
editor: null,
changeState:false,
isInputChange: false,
tempContent: this.defaultMsg
}
},
props: {
......@@ -29,63 +32,80 @@
},
},
mounted() {
this.loadUe();
},
watch: {
defaultMsg(newVal, oldVal) {
if (!this.isInputChange && newVal) {
if (this.editor && this.editor.isReady === 1) {
this.editor.setContent(newVal);
} else {
this.tempContent = newVal;
}
}
if (this.isInputChange) {
this.isInputChange = false;
}
},
},
methods: {
InitData(){
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
this.loadUe();
InitData() {
},
SelectId(e) {
if (e) {
let html = '';
this.ue = UE.getEditor('editor');
html= '<img src="' + this.domainManager().ImageUrl+e.url + '" style="max-width: 100%;">';
this.ue.execCommand('inserthtml', html);
}
this.changeState=false;
if (e) {
let html = '';
this.ue = UE.getEditor(this.id);
html = '<img src="' + this.domainManager().ImageUrl + e.url + '" style="max-width: 100%;">';
this.ue.execCommand('inserthtml', html);
}
this.isInputChange = false;
},
getUEContent() { // 获取内容方法
return this.editor.getContent()
},
loadUe() {
const vm = this;
this.ue = UE.getEditor('editor');
// this.ue.addListener('ready', editor => {
// if (this.tempContent) {
// this.ue.setContent(this.tempContent);
// }
// });
// this.ue.addListener('keyup', editor => {
// this.isInputChange = true;
// this.$emit('input', this.ue.getContent());
// });
// this.ue.addListener('contentChange', editor => {
// this.isInputChange = true;
// this.$emit('input', this.ue.getContent());
// });
const _this = this;
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
this.editor.addListener('ready', editor => {
if (_this.tempContent) {
_this.editor.setContent(_this.tempContent);
}
});
this.editor.addListener('keyup', editor => {
this.isInputChange = false;
var str = _this.editor.getContent();
_this.$emit('input', _this.editor.getContent());
});
this.editor.addListener('contentChange', editor => {
this.isInputChange = false;
var str = _this.editor.getContent();
_this.$emit('input', _this.editor.getContent());
});
let self = this;
UE.registerUI('appinsertimage', (editor, uiName) => {
return new UE.ui.Button({
name: uiName,
title: '插入图片',
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -381px 0px;',
onclick() {
self.ue = editor
vm.changeState = true;
},
});
return new UE.ui.Button({
name: uiName,
title: '插入图片',
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -381px 0px;',
onclick() {
self.ue = editor
_this.isInputChange = true;
},
});
});
}
}
},
destroyed() {
this.editor.destroy();
},
}
</script>
\ No newline at end of file
</script>
src/components/sallCenter/plugin/image-text.vue
View file @ f4c2ae81
<style>
.diy-image-text {
width: 100%;
height: 500px;
overflow:hidden;
overflow-y: auto;
}
.bb{
visibility: hidden;
}
.classA{
visibility: visible;
}
.diy-image-text {
width: 100%;
height: 500px;
overflow: hidden;
overflow-y: auto;
}
.bb {
visibility: hidden;
}
.classA {
visibility: visible;
}
</style>
<template>
<div :class="{'active':imageData.isCked}">
......@@ -25,12 +28,12 @@
<div class="diy-modal">
<div class="diy-component-preview">
<div class="diy-image-text">
<div v-if="data.content" v-html="jiance"></div>
<div v-else flex="main:center" style="line-height: 500px;color: rgb(173, 177, 184);">图文详情</div>
<div v-if="data.content" v-html="data.content"></div>
<div v-else flex="main:center" style="line-height: 500px;color: rgb(173, 177, 184);">图文详情</div>
</div>
</div>
<div class="diy-component-edit bb" :class="{'classA':imageData.isCked}">
<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
<UE :defaultMsg="defaultMsg" :config="config" ref="ue" @input="input"></UE>
</div>
</div>
</div>
......@@ -40,21 +43,20 @@
export default {
props: ["imageData", "index", "dataLeng"],
components: {
UE
UE
},
data() {
return {
data: this.imageData.data,
defaultMsg: '',
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
initialFrameWidth: null,
initialFrameHeight: 350,
},
content:''
content: ''
};
},
created() {
},
created() {},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
......@@ -64,14 +66,21 @@
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
input(obj) {
this.data.content = obj
},
},
computed: {
},
computed: {},
mounted() {
this.$refs.ue.InitData();
this.$refs.ue.InitData();
},
watch:{
watch: {
defaultMsg: {
handler(newVal, oldVal) {
console.log(newVal);
},
deep: true
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment