Skip to content

Commit

Permalink
fix:修改tiptap
Browse files Browse the repository at this point in the history
  • Loading branch information
@984507092
984507092 committed Nov 18, 2024
1 parent f03e9e6 commit e35a34c
Showing 1 changed file with 73 additions and 65 deletions.
138 changes: 73 additions & 65 deletions docs/view/learningNotes/12.tiptap基本教程.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,13 @@ export default {
watch: {
value: {
immediate: true,
deep: true,
handler(value) {
console.log("🚀 ~ handler ~ value:", value)
// JSON
// const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
// HTML
//处理回显时候的数据缩进
this.$nextTick(() => {
const isSame = this.editor.getHTML() === value
if (isSame) {
Expand All @@ -106,19 +107,12 @@ export default {
preserveWhitespace: 'full',
})
})
// const isSame = this.editor.getHTML() === value
// if (isSame) {
// return
// }
// this.editor.commands.setContent(value, false, {
// preserveWhitespace: 'full',
// })
},
},
},
mounted() {
this.init()
},
methods: {
Expand All @@ -127,9 +121,9 @@ export default {
extensions: config,
content: this.value,
autofocus: 'end',
onUpdate: (e) => {
onUpdate: ({ editor }) => {
// HTML
this.$emit('input', this.editor.getHTML())
this.$emit('input', editor.getHTML())
// JSON
// this.$emit('input', this.editor.getJSON())
},
Expand All @@ -145,7 +139,7 @@ export default {
return html.replace(/<!--StartFragment-->|<!--EndFragment-->/g, '')
},
replaceTextTags(htmlString) {
// 定义正则表达式，匹配常见的文本类标签(除了 < p > 标签)
// 定义正则表达式，匹配常见的文本类标签(除了 <p> 标签)
const pattern = /<\/?(b|strong|i|em|u|mark|small|del|ins|sub|sup)>/g
// 使用 replace 进行普换，将匹配的标签替换为<span>
const replacedHtml = htmlString.replace(pattern, '<span>')
Expand All @@ -158,32 +152,9 @@ export default {
// 获取粘贴板中的所有项目
const items = clipboardData.items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('text') !== -1) {
const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
let parser = new DOMParser()
if (html) {
event.preventDefault() // 阻止默认的粘贴行为
let doc = parser.parseFromString(html, 'text/html')
let elementsWithStyle = doc.querySelectorAll('[class]')
elementsWithStyle.forEach((element) => {
element.removeAttribute('class')
// element.removeAttribute('style')
})
let updateHtml = this.replaceTextTags(this.replaceFragment(doc.body.innerHTML))
console.log("🚀 ~ handlePaste ~ updateHtml:", updateHtml)
this.editor.commands.setContent(updateHtml)
}
// items[i].getAsString((str) => {
// this.editor.commands.insertContent(str)
// event.preventDefault() // 阻止默认的粘贴行为
// })
return true
}
// 检查项目的类型是否为图片
else if (items[i].type.indexOf('image') !== -1) {
if (items[i].type.indexOf('image') !== -1) {
// event.preventDefault() // 阻止默认的粘贴行为
const file = items[i].getAsFile()
// 假设您要将图片上传到服务器
// 创建一个新的 FormData 对象
Expand All @@ -201,6 +172,36 @@ export default {
})
return false
}
const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
let parser = new DOMParser()
if (html) {
let doc = parser.parseFromString(html, 'text/html')
let elementsWithStyle = doc.querySelectorAll('[class]')
elementsWithStyle.forEach((element) => {
element.removeAttribute('class')
element.removeAttribute('data-pm-slice')
// element.removeAttribute('style')
})
let fragment = this.replaceFragment(doc.body.innerHTML)
let updateHtml = this.replaceTextTags(fragment)
console.log("🚀 ~ handlePaste ~ updateHtml:", updateHtml)
this.editor.commands.insertContent(updateHtml, {
parseOptions: {
preserveWhitespace: false,
}
})
event.preventDefault() // 阻止默认的粘贴行为
return true
}
// if (items[i].type.indexOf('text') !== -1) {
// items[i].getAsString((str) => {
// this.editor.commands.insertContent(str)
// event.preventDefault() // 阻止默认的粘贴行为
// })
// return true
// }
}
return false
},
Expand Down Expand Up @@ -282,6 +283,7 @@ img {
max-height: 160px;
}
</style>
```

### index.config.js
Expand Down Expand Up @@ -738,40 +740,16 @@ img {
const replacedHtml = htmlString.replace(pattern, '<span>')
return replacedHtml
},
// 粘贴事件
// 粘贴事件
handlePaste(view, event, slice) {
// 首先获取粘贴板的数据
const clipboardData = event.clipboardData
// 获取粘贴板中的所有项目
const items = clipboardData.items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('text') !== -1) {
// https://www.wangeditor.com/v5/editor-config.html#custompaste
const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
let parser = new DOMParser()
if (html) {
event.preventDefault() // 阻止默认的粘贴行为
let doc = parser.parseFromString(html, 'text/html')
let elementsWithStyle = doc.querySelectorAll('[class]')
elementsWithStyle.forEach((element) => {
element.removeAttribute('class')
//element.removeAttribute('style')
})
let updateHtml = this.replaceTextTags(this.replaceFragment(doc.body.innerHTML))
console.log("🚀 ~ handlePaste ~ updateHtml:", updateHtml)
this.editor.commands.setContent(updateHtml)
}

// items[i].getAsString((str) => {
// this.editor.commands.insertContent(str)
// event.preventDefault() // 阻止默认的粘贴行为
// })
return true
}
// 检查项目的类型是否为图片
else if (items[i].type.indexOf('image') !== -1) {
if (items[i].type.indexOf('image') !== -1) {
// event.preventDefault() // 阻止默认的粘贴行为
const file = items[i].getAsFile()
// 假设您要将图片上传到服务器
// 创建一个新的 FormData 对象
Expand All @@ -789,9 +767,39 @@ img {
})
return false
}
const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
let parser = new DOMParser()
if (html) {
let doc = parser.parseFromString(html, 'text/html')
let elementsWithStyle = doc.querySelectorAll('[class]')
elementsWithStyle.forEach((element) => {
element.removeAttribute('class')
element.removeAttribute('data-pm-slice')
// element.removeAttribute('style')
})
let fragment = this.replaceFragment(doc.body.innerHTML)
let updateHtml = this.replaceTextTags(fragment)
console.log("🚀 ~ handlePaste ~ updateHtml:", updateHtml)
this.editor.commands.insertContent(updateHtml, {
parseOptions: {
preserveWhitespace: false,
}
})
event.preventDefault() // 阻止默认的粘贴行为
return true
}
// if (items[i].type.indexOf('text') !== -1) {
// items[i].getAsString((str) => {
// this.editor.commands.insertContent(str)
// event.preventDefault() // 阻止默认的粘贴行为
// })
// return true
// }
}
return false
}
},
```

## TipTap Pro 介绍
Expand Down

0 comments on commit e35a34c

Please sign in to comment.