修改复制图片不显示的问题

This commit is contained in:
jacky 2024-05-08 19:30:07 +08:00
parent 272d0fd312
commit 994790555b
2 changed files with 19 additions and 8 deletions

View File

@ -2,7 +2,7 @@
<div class="border border-solid border-gray-100 h-full"> <div class="border border-solid border-gray-100 h-full">
<Toolbar :editor="editorRef" :default-config="toolbarConfig" mode="default" /> <Toolbar :editor="editorRef" :default-config="toolbarConfig" mode="default" />
<Editor v-model="valueHtml" class="overflow-y-hidden mt-0.5" :style="style" :default-config="editorConfig" <Editor v-model="valueHtml" class="overflow-y-hidden mt-0.5" :style="style" :default-config="editorConfig"
mode="default" @onCreated="handleCreated" @onChange="change" /> mode="default" @onCreated="handleCreated" @onChange="change" @customPaste="customPaste" />
</div> </div>
</template> </template>
@ -73,10 +73,22 @@ const handleCreated = (editor) => {
valueHtml.value = props.modelValue valueHtml.value = props.modelValue
} }
const customPaste = (editor, event, callback) => {
let htmlData = event.clipboardData.getData('text/html') // html
htmlData = htmlData.replace('<img', '<img rel="noopener noreferrer"')
editor.dangerouslyInsertHtml(htmlData);
event.preventDefault()
callback(false)
}
watch(() => props.modelValue, () => { watch(() => props.modelValue, () => {
valueHtml.value = props.modelValue valueHtml.value = props.modelValue
}) })
</script> const isEmpty = () => {
return editorRef.value.isEmpty()
}
<style scoped lang="scss"></style> defineExpose({ isEmpty })
</script>

View File

@ -57,7 +57,8 @@
</el-row> </el-row>
<el-form-item label="文章内容" prop="content"> <el-form-item label="文章内容" prop="content">
<div v-if="showDrawer && !fullscreenLoading"> <div v-if="showDrawer && !fullscreenLoading">
<RichEdit v-model="editForm.content" media-category="article_content_imgs" style="height: 50rem;" /> <RichEdit ref="contentEditorRef" v-model="editForm.content" media-category="article_content_imgs"
style="height: 50rem;" />
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -140,7 +141,6 @@ import { getChannelTree } from '@/api/channel'
import { getTagList } from '@/api/tag' import { getTagList } from '@/api/tag'
import ChooseImg from '@/components/chooseImg/index.vue' import ChooseImg from '@/components/chooseImg/index.vue'
import UploadCommon from '@/components/upload/common.vue' import UploadCommon from '@/components/upload/common.vue'
import UploadImage from '@/components/upload/image.vue'
import { import {
addArticle, addArticle,
updateArticle, updateArticle,
@ -149,7 +149,6 @@ import {
import { importFetcherArticleById } from '@/api/fetcher' import { importFetcherArticleById } from '@/api/fetcher'
import { isUrl } from '@/utils/validator' import { isUrl } from '@/utils/validator'
import { articleTypeOptions } from '@/utils/options' import { articleTypeOptions } from '@/utils/options'
import { formatDate } from '@/utils/format'
// //
defineOptions({ defineOptions({
@ -166,10 +165,10 @@ const fullscreenLoading = ref(true)
const isEdit = ref(false) // isEdit = true const isEdit = ref(false) // isEdit = true
const fetcherArticleId = ref(0) // id const fetcherArticleId = ref(0) // id
const elEditFormRef = ref() const elEditFormRef = ref()
const contentEditorRef = ref(null)
const checkContent = (rule, value, callback) => { const checkContent = (rule, value, callback) => {
const content = value.replace(/<\/?.+?\/?>|\r|\n|\s*/g, '') if (contentEditorRef.value.isEmpty()) {
if (content === '') {
callback(new Error(rule.message)) callback(new Error(rule.message))
} else { } else {
callback() callback()