用vue3写一个富文本组件
时间: 2023-10-31 11:16:38 浏览: 42
以下是一个简单的基于Vue3的富文本编辑器组件:
```vue
<template>
<div>
<div class="toolbar">
<button @click="applyStyle('bold')">
<i class="fas fa-bold"></i>
</button>
<button @click="applyStyle('italic')">
<i class="fas fa-italic"></i>
</button>
<button @click="applyStyle('underline')">
<i class="fas fa-underline"></i>
</button>
<button @click="applyStyle('strikeThrough')">
<i class="fas fa-strikethrough"></i>
</button>
<button @click="applyStyle('subscript')">
<i class="fas fa-subscript"></i>
</button>
<button @click="applyStyle('superscript')">
<i class="fas fa-superscript"></i>
</button>
<button @click="applyStyle('justifyLeft')">
<i class="fas fa-align-left"></i>
</button>
<button @click="applyStyle('justifyCenter')">
<i class="fas fa-align-center"></i>
</button>
<button @click="applyStyle('justifyRight')">
<i class="fas fa-align-right"></i>
</button>
<button @click="applyStyle('justifyFull')">
<i class="fas fa-align-justify"></i>
</button>
<button @click="applyStyle('indent')">
<i class="fas fa-indent"></i>
</button>
<button @click="applyStyle('outdent')">
<i class="fas fa-outdent"></i>
</button>
<button @click="applyStyle('insertUnorderedList')">
<i class="fas fa-list-ul"></i>
</button>
<button @click="applyStyle('insertOrderedList')">
<i class="fas fa-list-ol"></i>
</button>
<button @click="applyStyle('insertHorizontalRule')">
<i class="fas fa-ellipsis-h"></i>
</button>
<button @click="applyStyle('undo')">
<i class="fas fa-undo"></i>
</button>
<button @click="applyStyle('redo')">
<i class="fas fa-redo"></i>
</button>
</div>
<div class="editor" contenteditable="true" @input="updateContent" :innerHTML="content"></div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'RichTextEditor',
setup() {
const content = ref('');
const applyStyle = (command) => {
document.execCommand(command, false, null);
};
const updateContent = (event) => {
content.value = event.target.innerHTML;
};
return {
content,
applyStyle,
updateContent,
};
},
};
</script>
<style>
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f8f8f8;
border-bottom: 1px solid #e8e8e8;
}
.toolbar button {
margin-right: 5px;
padding: 5px;
border: none;
background-color: transparent;
cursor: pointer;
}
.toolbar button i {
font-size: 16px;
}
.editor {
padding: 10px;
min-height: 200px;
border: 1px solid #e8e8e8;
border-radius: 5px;
}
</style>
```
该组件包含一个富文本编辑器和一个工具栏,可以通过工具栏应用常见的富文本样式和命令。具体实现方式是使用`document.execCommand()`方法将命令应用于选中的文本或光标所在位置,然后使用`contenteditable`属性使编辑器区域可编辑,使用`v-html`绑定实时更新的内容。
该组件还使用了Vue 3的Composition API,使用了`ref`函数来创建响应式数据`content`,并使用`setup`函数来定义组件的逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)