提交 219d41fe 编写于 作者: KK's avatar KK

富文本样式优化

上级 050a9f09
.app-mob-rich-text-editor{
width: 100%;
height: 100%;
justify-content: flex-end;
display: flex;
.app-mob-rich-text-editor-icon{
margin-right: 4px;
color: #777272;
font-size: 18px;
}
}
\ No newline at end of file
<template>
<div>
<div v-html="reValue"></div><ion-icon name="options-outline" @click="open"></ion-icon>
</div>
<div class="app-mob-rich-text-editor" @click="open">
<div v-html="reValue"></div>
<ion-icon class="app-mob-rich-text-editor-icon" v-if="!reValue" name="options-outline" @click="open"></ion-icon>
</div>
</template>
<script lang = 'ts'>
import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
......@@ -9,48 +10,49 @@ import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
export default class AppRichTextEditor extends Vue {
/**
* 输入
* 值
*
* @type {string}
* @memberof AppInput
* @memberof AppRichTextEditor
*/
@Prop() public value?: any;
/**
* 绑定值
*
* @type {string}
* @memberof AppRichTextEditor
*/
get reValue(){
return this.value;
}
/**
* 获取值
*
* @type {string}
* @memberof AppRichTextEditor
*/
set reValue(value:any){
this.$emit("change", value);
}
/**
* 类型
* 打开富文本
*
* @type {string}
* @memberof AppInput
* @memberof AppRichTextEditor
*/
@Prop() public type?: string;
public open(){
this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value});
}
/**
* 占位提示文字
* 模态打开富文本
*
* @type {string}
* @memberof AppInput
* @memberof AppRichTextEditor
*/
@Prop() public placeholder?:string;
public messages = "";
public onEditorBlur(){}
public onEditorFocus(){}
public onEditorReady(){}
public open(){
this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value});
}
private async openPopupModal(view: any, context: any, param: any): Promise<any> {
const result: any = await this.$appmodal.openModal(view, context, param);
if (result || Object.is(result.ret, 'OK')) {
......@@ -58,11 +60,8 @@ export default class AppRichTextEditor extends Vue {
}
}
public openViewClose(result: any) {
}
}
</script>
<style lang="less">
@import './app-mob-rich-text-editor.less';
</style>
\ No newline at end of file
.quill-editor {
.richtext{
height: calc(100% - 10vh);
.quill-editor {
-webkit-touch-callout: text !important;
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
img{
max-width: 90%;
}
}
.richtext{
height: calc(100% - 20vh);
}
.quill-editor-button{
.quill-editor-button {
text-align: center;
position: absolute;
bottom: 0;
width: 100%
ion-button{
width: 58%;
}
}
\ No newline at end of file
position: absolute;
bottom: 0;
width: 100%;
ion-button {
width: 48%;
}
}
.ql-container {
height: calc(100% - 65px);
}
}
\ No newline at end of file
......@@ -90,7 +90,7 @@ export default class AppRichTextEditor extends Vue {
* @memberof AppRichTextEditor
*/
public mounted() {
this.resloutValue = JSON.parse(this._viewparams).value;
this.resloutValue = JSON.parse(this._viewparams).value?JSON.parse(this._viewparams).value:"";
}
/**
......@@ -156,7 +156,6 @@ export default class AppRichTextEditor extends Vue {
if (response && response.data && response.status === 200) {
let data: any = response.data;
if (process.env.NODE_ENV === "development") {
this.devFiles.push(Object.assign({}, data, { url: file.content }));
this.dataProcess(Object.assign({}, data, { url: file.content }));
}
} else {
......@@ -174,46 +173,13 @@ export default class AppRichTextEditor extends Vue {
private dataProcess(file: any): void {
let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
this.uploadUrl = _uploadUrl;
if (process.env.NODE_ENV === "development") {
let index = this.devFiles.findIndex((devFile: any) =>
Object.is(devFile.id, file.id)
);
if (index !== -1) {
file.url = this.devFiles[index].url;
file.isImage = true;
}
}
let _downloadUrl = `${this.downloadUrl}/${file.id}`;
file.isImage = true;
file.url = _downloadUrl;
this.resloutValue = '<img src="' + file.url + '" alt="">';
this.resloutValue = this.resloutValue + '<img src="' + file.url + '" alt="">';
}
}
</script>
<style lang="less">
.richtext{
.quill-editor {
-webkit-touch-callout: text !important;
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
}
.richtext {
height: calc(100% - 10vh);
}
.quill-editor-button {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
ion-button {
width: 48%;
}
}
.ql-container {
height: calc(100% - 65px);
}
}
@import './app-rich-text.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册