本文主要是介绍vue3 + ts，怎么在页面上展示富文本编辑器传过来的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- 使用第三方富文本编辑器库（例如Quill）：
首先，安装并导入所选择的富文本编辑器库，并在setup函数中创建一个可响应的数据，用于保存富文本编辑器的内容。接下来，将该数据绑定到富文本编辑器组件，并在模板中显示其内容。
<template><div><quill-editor v-model="editorContent"></quill-editor><div v-html="editorContent"></div></div>
</template><script>
import { ref } from 'vue';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import Quill from 'quill';export default {setup() {const editorContent = ref('');// 初始化富文本编辑器const quill = new Quill('#quill-editor', {// 配置选项});// 监听内容变化quill.on('text-change', () => {editorContent.value = quill.root.innerHTML;});return { editorContent };},
};
</script>
在上面的代码中，我们使用了quill-editor组件作为富文本编辑器，并绑定了editorContent数据。在页面上展示富文本编辑器的内容时，我们使用了v-html指令来渲染富文本的HTML内容。
- 使用
contentEditable属性：
首先，在模板中创建一个具有contentEditable属性的元素，例如<div>，并通过ref创建一个对该元素的引用。在setup函数中，你可以监听富文本编辑器传递的值的变化，并将其赋值给content数据。最后，使用插值将content的值展示在具有contentEditable属性的元素内。
<template><div><div ref="editable" contenteditable="true"></div><div>{{ content }}</div></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const editable = ref(null);const content = ref('');onMounted(() => {// 模拟富文本编辑器传递的值const editorValue = '<strong>Content from editor</strong>';content.value = editorValue;editable.value.innerHTML = editorValue;});return { editable, content };},
};
</script>
在上面的代码中，我们使用了contenteditable="true"来表示元素可以进行编辑。在onMounted钩子中，我们模拟了富文本编辑器传递的值，并将其赋值给content数据，并将其渲染在具有contentEditable属性的元素内。
这篇关于vue3 + ts，怎么在页面上展示富文本编辑器传过来的值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
