定義

全局屬性 contenteditable 是一個枚舉屬性，表示元素是否可被用戶編輯。如果可以，瀏覽器會修改元素的組件以允許編輯。

該屬性必須是下面的值之一：

• true 或空字符串，表示元素是可編輯的。
• false 表示元素不是可編輯的。
• plaintext-only 表示元素的原始文本是可編輯的，但富文本格式會被禁用。 contenteditable 是一個 HTML 屬性，可以應(yīng)用于 HTML 元素，使其成為可編輯的區(qū)域。通過使用 contenteditable 屬性，可以實(shí)現(xiàn)在網(wǎng)頁中編輯文本內(nèi)容的功能，類似于在富文本編輯器中進(jìn)行編輯。

主要特點(diǎn)

可以實(shí)現(xiàn)富文本編輯功能，包括插入圖片、編輯文字樣式（如加粗、斜體、下劃線等）、創(chuàng)建鏈接等。

允許用戶在網(wǎng)頁中直接編輯文本內(nèi)容，而無需使用表單輸入框或富文本編輯器。

可以與 JavaScript 事件結(jié)合使用，如input事件、keydown事件等，以便在用戶輸入時進(jìn)行相應(yīng)的處理。

項目實(shí)戰(zhàn)

最近遇到一個需求，要求表格的內(nèi)容可編輯，項目使用的 vue3.2 版本。其實(shí)這個需求使用input也可以實(shí)現(xiàn)，但是還得各種覆蓋樣式，很早之前也聽說過contenteditable這個屬性，這次正好借機(jī)體驗(yàn)一下，廢話不多說，直接封裝一個組件。

template 部分

<template>
  <span contenteditable :innerHTML="content" @input="updateContent" class="custom-contenteditable"></span>
</template>

Js部分

<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['content']);
const emit = defineEmits(['update:content']);
?
const content = ref(props.content);
?
const updateContent = (event) => {
  event.target.innerText = event.target.innerText.replace(/\D/g, ''); // 過濾非數(shù)
  content.value = event.target.innerText;
  emit('update:content', Number(event.target.innerText));
};
?
watch(() => props.content, (newValue) => {
  content.value = newValue;
});
</script>

CSS 部分

<style lang="scss" scoped>
.custom-contenteditable {
  box-sizing: border-box;
  border: 1px solid transparent;
  &:focus {
    outline: 0px;
    border: 1px solid rgb(24, 144, 255) !important;
  }
?
  &:hover {
    border: 1px dashed #aaaaaa;
    transition: all .5s;
  }
}
</style>

組件使用

<ContentEditable v-model:content="item.data" />

最終實(shí)現(xiàn)效果

可以看到，加上一些樣式還是很絲滑的，由于需求原因，只能輸入數(shù)字，因此在@input事件中將輸入值過濾了一遍。如果需要其他格式的，可以對組件進(jìn)一步封裝，拓展對應(yīng)的props即可。

注意事項

在使用時需要格外小心，因?yàn)橛脩艨梢栽诳删庉媴^(qū)域中插入任意 HTML 和 JavaScript 代碼，可能導(dǎo)致安全風(fēng)險。

因?yàn)闉g覽器對 contenteditable 的實(shí)現(xiàn)可能存在差異，因此在跨瀏覽器兼容性方面需要注意。

其他適用場景

• 富文本編輯器
• 內(nèi)容管理系統(tǒng)
• 用戶自定義頁面
• 電子郵件編輯

瀏覽器兼容性

到此這篇關(guān)于Vue3使用contenteditable打造定制化輸入的文章就介紹到這了,更多相關(guān)Vue3 contenteditable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論