sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增富文本显示

master
于肖磊 2025-07-02 17:08:53 +08:00
parent 3982943b91
commit 0960667c08
2 changed files with 134 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/form-input/components/form-input/form-input.vue
View File

@ -12,12 +12,21 @@
<!-- 左右模式 -->
<!-- <template v-if="flex_direction == 'row'"> -->
<view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? 'flex-row align-b gap-10' : 'flex-col gap-10')">
<view v-if="item.key !== 'auxiliary-line'" class="field-label flex-row align-c gap-10" :style="field_label_style">
<view v-if="!['rich-text', 'auxiliary-line'].includes(item.key)" class="field-label flex-row align-c gap-10" :style="field_label_style">
<view class="flex-row align-c" :style="title_style">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
<view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
<iconfont name="icon-miaosha-hdgz" :size="help_icon_style" color="#999"></iconfont>
</view>
</view>
<!-- 富文本仅支持H5、APP-PLUS、微信小程序、百度小程序 -->
<!-- #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU -->
<view v-if="item.key == 'rich-text'" class="field-label flex-row align-c gap-10" :style="field_label_style">
<view class="flex-row align-c" :style="title_style">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
<view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
<iconfont name="icon-miaosha-hdgz" :size="help_icon_style" color="#999"></iconfont>
</view>
</view>
<!-- #endif -->
<view class="flex-1 wh-auto flex-col gap-5">
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
<component-input :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-input>
@ -73,6 +82,11 @@
<view v-else-if="item.key == 'auxiliary-line'">
<component-auxiliary-line :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-auxiliary-line>
</view>
<!-- #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU -->
<view v-else-if="item.key == 'rich-text'" :style="item.com_data.common_style + 'padding:0;'">
<component-rich-text :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataChange="data_change"></component-rich-text>
</view>
<!-- #endif -->
<view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
</view>
</view>
@ -120,6 +134,7 @@ import componentVideo from '@/pages/form-input/components/form-input/video.vue';
import componentText from '@/pages/form-input/components/form-input/text.vue';
import componentAttachments from '@/pages/form-input/components/form-input/attachments.vue';
import componentAuxiliaryLine from '@/pages/form-input/components/form-input/auxiliary-line.vue';
import componentRichText from '@/pages/form-input/components/form-input/rich-text.vue';
import componentRegionPicker from '@/pages/common/components/region-picker/region-picker';
export default {
name: 'formInput',
@ -142,7 +157,8 @@ export default {
componentVideo,
componentText,
componentAttachments,
componentAuxiliaryLine
componentAuxiliaryLine,
componentRichText
},
props: {
propValue: {

116
pages/form-input/components/form-input/rich-text.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<sp-editor @init="initEditor" @input="rich_text_event" @upinImage="up_in_image_event"></sp-editor>
</template>
<script>
const app = getApp();
import { isEmpty } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: 0,
},
propDataIndex: {
type: Number,
default: 0,
},
propStyle: {
type: String,
default: '',
},
propIsCustom: {
type: Boolean,
default: false,
}
},
data() {
return {
com_data: {},
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const com_data = this.propValue;
this.setData({
com_data: com_data,
form_value: com_data.form_value || '',
});
},
initEditor(editor) {
// 初始化编辑器内容
editor.setContents({
html: (this.propValue.form_value || null) !== null ? this.propValue.form_value : '',
});
},
// 回调富文本内容
rich_text_event(e) {
var new_data = this.data;
new_data = e.html;
this.setData({
form_value: new_data,
});
this.$emit('dataChange', { value: new_data, index: this.propDataIndex });
},
// 上传图片
up_in_image_event(tempFiles, editorCtx) {
var self = this;
// 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
tempFiles.forEach(async (item) => {
uni.showLoading({
title: self.$t('form.form.2e5rv3'),
mask: true,
});
await uni.uploadFile({
url: app.globalData.get_request_url('index', 'ueditor'),
// #ifdef APP-PLUS || H5
filePath: item.path,
// #endif
// #ifdef MP-WEIXIN
filePath: item.tempFilePath,
// #endif
name: 'upfile',
formData: {
action: 'uploadimage',
path_type: this.editor_path_type, // 路径类型，默认common
},
success: function (res) {
let data = JSON.parse(res.data);
if (res.statusCode == 200) {
// 上传完成后处理
editorCtx.insertImage({
src: data.data.url, // 此处需要将图片地址切换成服务器返回的真实图片地址
// width: '50%',
alt: self.$t('common.video'),
success: function (e) {},
});
uni.hideLoading();
}
},
fail: function (e) {
app.globalData.showToast(e.errMsg);
uni.hideLoading();
},
});
});
}
},
};
</script>
<style></style>