Vue3使用 contenteditable 打造定制化输入体验

❝

contenteditable 属性为网页开发者提供了一种灵活的方式来创建可编辑的内容区域，使用户可以直接在网页上进行内容编辑，而无需依赖传统的输入框。

❞

定义

全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

该属性必须是下面的值之一：

• true 或空字符串，表示元素是可编辑的。
• false 表示元素不是可编辑的。
• plaintext-only 表示元素的原始文本是可编辑的，但富文本格式会被禁用。 contenteditable 是一个 HTML 属性，可以应用于 HTML 元素，使其成为可编辑的区域。通过使用 contenteditable 属性，可以实现在网页中编辑文本内容的功能，类似于在富文本编辑器中进行编辑。

主要特点

可以实现富文本编辑功能，包括插入图片、编辑文字样式（如加粗、斜体、下划线等）、创建链接等。

允许用户在网页中直接编辑文本内容，而无需使用表单输入框或富文本编辑器。

可以与 JavaScript 事件结合使用，如input事件、keydown事件等，以便在用户输入时进行相应的处理。

项目实战

最近遇到一个需求，要求表格的内容可编辑，项目使用的 vue3.2 版本。其实这个需求使用input也可以实现，但是还得各种覆盖样式，很早之前也听说过contenteditable这个属性，这次正好借机体验一下，废话不多说，直接封装一个组件。

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, ''); // 过滤非数
  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" />

最终实现效果

可以看到，加上一些样式还是很丝滑的，由于需求原因，只能输入数字，因此在@input事件中将输入值过滤了一遍。如果需要其他格式的，可以对组件进一步封装，拓展对应的props即可。

注意事项

在使用时需要格外小心，因为用户可以在可编辑区域中插入任意 HTML 和 JavaScript 代码，可能导致安全风险。

因为浏览器对 contenteditable 的实现可能存在差异，因此在跨浏览器兼容性方面需要注意。

其他适用场景

• 富文本编辑器
• 内容管理系统
• 用户自定义页面
• 电子邮件编辑

浏览器兼容性