富文本
This commit is contained in:
zjf committed
1 parent
4b02337db3
commit
276c11bec0
4 files changed
+1353
-3
No files matched your search
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<view class="rich-text-input">
|
||||
<tm-form-item :name="name" :label="label" :required="required" :direction="direction">
|
||||
<view class="input-container" @click="openEditor">
|
||||
<view v-if="!modelValue || modelValue.trim() === ''" class="placeholder">
|
||||
{{ placeholder }}
|
||||
</view>
|
||||
<view v-else class="content-preview">
|
||||
<rich-text :nodes="previewNodes" class="preview-text"></rich-text>
|
||||
</view>
|
||||
<view class="input-actions">
|
||||
<tm-icon name="edit" size="16" color="#999"></tm-icon>
|
||||
</view>
|
||||
</view>
|
||||
</tm-form-item>
|
||||
|
||||
<!-- 弹窗编辑器 -->
|
||||
<tm-modal v-model:show="showEditor" title="富文本编辑" :showClose="true" size="large" :height="'80vh'" :zIndex="1000">
|
||||
<view class="editor-modal-content">
|
||||
<rich-text-editor
|
||||
v-model="editorContent"
|
||||
:placeholder="placeholder"
|
||||
@change="onEditorChange"
|
||||
/>
|
||||
</view>
|
||||
<template #footer>
|
||||
<view class="modal-footer">
|
||||
<tm-button size="s" skin="thin" @click="showEditor = false">取消</tm-button>
|
||||
<tm-button size="s" color="primary" @click="saveContent">保存</tm-button>
|
||||
</view>
|
||||
</template>
|
||||
</tm-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import RichTextEditor from '../rich-text-editor/rich-text-editor.vue'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
label?: string
|
||||
name?: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
direction?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: '',
|
||||
label: '内容',
|
||||
placeholder: '点击编辑内容...',
|
||||
required: false,
|
||||
direction: 'horizontal'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const showEditor = ref(false)
|
||||
const editorContent = ref('')
|
||||
|
||||
// 预览节点
|
||||
const previewNodes = computed(() => {
|
||||
if (!props.modelValue || props.modelValue.trim() === '') return []
|
||||
return parseToRichText(props.modelValue)
|
||||
})
|
||||
|
||||
// 监听内容变化
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
editorContent.value = newVal || ''
|
||||
})
|
||||
|
||||
// 打开编辑器
|
||||
const openEditor = () => {
|
||||
editorContent.value = props.modelValue || ''
|
||||
showEditor.value = true
|
||||
}
|
||||
|
||||
// 编辑器内容变化
|
||||
const onEditorChange = (content: string) => {
|
||||
editorContent.value = content
|
||||
}
|
||||
|
||||
// 保存内容
|
||||
const saveContent = () => {
|
||||
emit('update:modelValue', editorContent.value)
|
||||
emit('change', editorContent.value)
|
||||
showEditor.value = false
|
||||
}
|
||||
|
||||
// HTML转Markdown函数
|
||||
const convertHtmlToMarkdown = (html: string): string => {
|
||||
if (!html) return ''
|
||||
|
||||
// 移除HTML标签，保留文本内容
|
||||
let markdown = html
|
||||
// 处理标题
|
||||
.replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n')
|
||||
.replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n')
|
||||
.replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n')
|
||||
.replace(/<h4[^>]*>(.*?)<\/h4>/gi, '#### $1\n')
|
||||
.replace(/<h5[^>]*>(.*?)<\/h5>/gi, '##### $1\n')
|
||||
.replace(/<h6[^>]*>(.*?)<\/h6>/gi, '###### $1\n')
|
||||
// 处理段落
|
||||
.replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n')
|
||||
// 处理换行
|
||||
.replace(/<br\s*\/?>/gi, '\n')
|
||||
// 处理粗体
|
||||
.replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
|
||||
.replace(/<b[^>]*>(.*?)<\/b>/gi, '**$1**')
|
||||
// 处理斜体
|
||||
.replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
|
||||
.replace(/<i[^>]*>(.*?)<\/i>/gi, '*$1*')
|
||||
// 处理下划线
|
||||
.replace(/<u[^>]*>(.*?)<\/u>/gi, '__$1__')
|
||||
// 处理链接
|
||||
.replace(/<a[^>]*href=["']([^"']*)["'][^>]*>(.*?)<\/a>/gi, '[$2]($1)')
|
||||
// 处理图片 - 更全面的图片处理
|
||||
.replace(/<img[^>]*src=["']([^"']*)["'][^>]*alt=["']([^"']*)["'][^>]*>/gi, (match, src, alt) => {
|
||||
// 直接使用原始URL，不添加额外前缀
|
||||
console.log('rich-text-input HTML图片转换 - 原始:', match)
|
||||
console.log('rich-text-input HTML图片转换 - src:', src)
|
||||
console.log('rich-text-input HTML图片转换 - alt:', alt)
|
||||
return ``
|
||||
})
|
||||
.replace(/<img[^>]*src=["']([^"']*)["'][^>]*>/gi, (match, src) => {
|
||||
// 直接使用原始URL，不添加额外前缀
|
||||
console.log('rich-text-input HTML图片转换 - 原始:', match)
|
||||
console.log('rich-text-input HTML图片转换 - src:', src)
|
||||
return ``
|
||||
})
|
||||
// 处理列表
|
||||
.replace(/<ul[^>]*>(.*?)<\/ul>/gis, (match, content) => {
|
||||
return content.replace(/<li[^>]*>(.*?)<\/li>/gi, '- $1\n')
|
||||
})
|
||||
.replace(/<ol[^>]*>(.*?)<\/ol>/gis, (match, content) => {
|
||||
let index = 1
|
||||
return content.replace(/<li[^>]*>(.*?)<\/li>/gi, () => `${index++}. $1\n`)
|
||||
})
|
||||
// 处理引用
|
||||
.replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gis, (match, content) => {
|
||||
return content.replace(/\n/g, '\n> ') + '\n'
|
||||
})
|
||||
// 处理代码
|
||||
.replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`')
|
||||
.replace(/<pre[^>]*>(.*?)<\/pre>/gis, '```\n$1\n```')
|
||||
// 处理分割线
|
||||
.replace(/<hr[^>]*>/gi, '---\n')
|
||||
// 处理表格（简单处理）
|
||||
.replace(/<table[^>]*>(.*?)<\/table>/gis, (match, content) => {
|
||||
return content.replace(/<tr[^>]*>(.*?)<\/tr>/gi, (trMatch, trContent) => {
|
||||
const cells = trContent.match(/<t[hd][^>]*>(.*?)<\/t[hd]>/gi)
|
||||
if (cells) {
|
||||
return '| ' + cells.map(cell => cell.replace(/<[^>]*>/g, '')).join(' | ') + ' |\n'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
})
|
||||
// 移除剩余的HTML标签
|
||||
.replace(/<[^>]*>/g, '')
|
||||
// 清理多余的换行
|
||||
.replace(/\n{3,}/g, '\n\n')
|
||||
.trim()
|
||||
|
||||
return markdown
|
||||
}
|
||||
|
||||
// 解析为富文本节点
|
||||
const parseToRichText = (text: string) => {
|
||||
if (!text) return []
|
||||
|
||||
// 如果包含HTML标签，先转换为Markdown
|
||||
const markdownText = text.includes('<') ? convertHtmlToMarkdown(text) : text
|
||||
|
||||
const nodes = []
|
||||
const lines = markdownText.split('\n')
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i]
|
||||
|
||||
if (line.startsWith('# ')) {
|
||||
nodes.push({
|
||||
name: 'h1',
|
||||
attrs: { style: 'font-size: 16px; font-weight: bold; margin: 6px 0; color: #333;' },
|
||||
children: [{ type: 'text', text: line.substring(2) }]
|
||||
})
|
||||
} else if (line.startsWith('## ')) {
|
||||
nodes.push({
|
||||
name: 'h2',
|
||||
attrs: { style: 'font-size: 14px; font-weight: bold; margin: 4px 0; color: #333;' },
|
||||
children: [{ type: 'text', text: line.substring(3) }]
|
||||
})
|
||||
} else if (line.startsWith('### ')) {
|
||||
nodes.push({
|
||||
name: 'h3',
|
||||
attrs: { style: 'font-size: 13px; font-weight: bold; margin: 3px 0; color: #333;' },
|
||||
children: [{ type: 'text', text: line.substring(4) }]
|
||||
})
|
||||
} else if (line.startsWith('- ')) {
|
||||
nodes.push({
|
||||
name: 'li',
|
||||
attrs: { style: 'margin: 1px 0; padding-left: 12px; color: #666;' },
|
||||
children: [{ type: 'text', text: '• ' + line.substring(2) }]
|
||||
})
|
||||
} else if (line.startsWith('> ')) {
|
||||
nodes.push({
|
||||
name: 'blockquote',
|
||||
attrs: { style: 'border-left: 2px solid #ddd; padding-left: 6px; margin: 2px 0; color: #666; font-style: italic;' },
|
||||
children: [{ type: 'text', text: line.substring(2) }]
|
||||
})
|
||||
} else if (line.startsWith('---')) {
|
||||
nodes.push({
|
||||
name: 'hr',
|
||||
attrs: { style: 'border: none; border-top: 1px solid #eee; margin: 6px 0;' }
|
||||
})
|
||||
} else if (line.trim()) {
|
||||
const formattedText = formatText(line)
|
||||
nodes.push({
|
||||
name: 'p',
|
||||
attrs: { style: 'margin: 1px 0; line-height: 1.3; color: #666;' },
|
||||
children: formattedText
|
||||
})
|
||||
} else {
|
||||
nodes.push({
|
||||
name: 'br'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return nodes
|
||||
}
|
||||
|
||||
// 格式化文本
|
||||
const formatText = (text: string) => {
|
||||
const children = []
|
||||
let remaining = text
|
||||
|
||||
while (remaining.length > 0) {
|
||||
const boldMatch = remaining.match(/\*\*(.*?)\*\*/)
|
||||
const italicMatch = remaining.match(/\*(.*?)\*/)
|
||||
const linkMatch = remaining.match(/\[([^\]]+)\]\(([^)]+)\)/)
|
||||
const imageMatch = remaining.match(/!\[([^\]]*)\]\(([^)]+)\)/)
|
||||
|
||||
let match = null
|
||||
let type = ''
|
||||
|
||||
if (boldMatch && (!match || boldMatch.index < match.index)) {
|
||||
match = boldMatch
|
||||
type = 'bold'
|
||||
}
|
||||
if (italicMatch && (!match || italicMatch.index < match.index)) {
|
||||
match = italicMatch
|
||||
type = 'italic'
|
||||
}
|
||||
if (linkMatch && (!match || linkMatch.index < match.index)) {
|
||||
match = linkMatch
|
||||
type = 'link'
|
||||
}
|
||||
if (imageMatch && (!match || imageMatch.index < match.index)) {
|
||||
match = imageMatch
|
||||
type = 'image'
|
||||
}
|
||||
|
||||
if (match) {
|
||||
if (match.index > 0) {
|
||||
children.push({
|
||||
type: 'text',
|
||||
text: remaining.substring(0, match.index)
|
||||
})
|
||||
}
|
||||
|
||||
if (type === 'bold') {
|
||||
children.push({
|
||||
name: 'strong',
|
||||
children: [{ type: 'text', text: match[1] }]
|
||||
})
|
||||
} else if (type === 'italic') {
|
||||
children.push({
|
||||
name: 'em',
|
||||
children: [{ type: 'text', text: match[1] }]
|
||||
})
|
||||
} else if (type === 'link') {
|
||||
children.push({
|
||||
name: 'a',
|
||||
attrs: { href: match[2], style: 'color: #007bff; text-decoration: underline;' },
|
||||
children: [{ type: 'text', text: match[1] }]
|
||||
})
|
||||
} else if (type === 'image') {
|
||||
// 处理图片URL，确保能正确显示
|
||||
let imageUrl = match[2]
|
||||
console.log('原始图片URL:', imageUrl)
|
||||
// 如果是相对路径，添加基础URL
|
||||
if (imageUrl.startsWith('/api/') || imageUrl.startsWith('/admin/')) {
|
||||
// 使用环境变量获取图片基础路径
|
||||
const isDev = import.meta.env.DEV
|
||||
let baseUrl = ''
|
||||
|
||||
if (isDev) {
|
||||
// 开发环境
|
||||
baseUrl = import.meta.env.VITE_IMAGE_DEV_PATH || 'http://127.0.0.1:9999'
|
||||
} else {
|
||||
// 生产环境
|
||||
baseUrl = import.meta.env.VITE_APP_PROD_IMAGE || window.location.origin
|
||||
}
|
||||
|
||||
console.log('环境:', isDev ? '开发' : '生产')
|
||||
console.log('基础URL:', baseUrl)
|
||||
console.log('原始图片URL:', imageUrl)
|
||||
|
||||
// 拼接URL
|
||||
imageUrl = baseUrl + imageUrl
|
||||
console.log('拼接后URL:', imageUrl)
|
||||
}
|
||||
|
||||
children.push({
|
||||
name: 'img',
|
||||
attrs: {
|
||||
src: imageUrl,
|
||||
alt: match[1] || '图片',
|
||||
style: 'max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 4px;'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
remaining = remaining.substring(match.index + match[0].length)
|
||||
} else {
|
||||
children.push({
|
||||
type: 'text',
|
||||
text: remaining
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return children.length > 0 ? children : [{ type: 'text', text: text }]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rich-text-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
min-height: 44px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input-container:active {
|
||||
border-color: #007bff;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
max-height: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-modal-content {
|
||||
height: 60vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user