<template>
|
<div class="rich-text-wrapper">
|
<rich-text :nodes="_content" style="word-wrap: break-word"></rich-text>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
defineOptions({
|
name: 'RichEditorContent',
|
});
|
|
type Props = {
|
content: string;
|
};
|
|
const _content = computed(() =>
|
props.content.replace(/<img[^>]*>/g, (match) => {
|
let str = match.replace(`width=""`, '').replace(`height=""`, '').replace(`style=""`, '');
|
|
if (/style="/.test(str)) {
|
str = str.replace('style="', 'style="max-width: 100%; ');
|
} else {
|
str = str.replace('<img', '<img style="max-width: 100%;" ');
|
}
|
|
return str;
|
})
|
);
|
|
const props = withDefaults(defineProps<Props>(), {});
|
</script>
|
|
<!-- <style>
|
@import './style.css';
|
</style> -->
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.rich-text-wrapper {
|
overflow-x: hidden;
|
color: boleGetCssVar('text-color', 'primary');
|
font-size: 28px;
|
|
rich-text {
|
overflow-x: hidden;
|
word-wrap: break-word;
|
white-space: normal;
|
}
|
|
/* .h5-img,
|
img {
|
max-width: 100%;
|
min-height: 20px;
|
min-width: 20px;
|
display: inline !important;
|
} */
|
}
|
</style>
|
