你是否在寻找一种简单易用的方式来创建自己的在线编辑器？使用Vue和HTML5的ContentEditable属性，你可以轻松实现这一目标。在这篇文章中，我们将向你展示如何构建一个完整的编辑器，包括常见的文本样式和格式化功能。

我们将使用Vue.js作为我们的前端框架，并在其中使用ContentEditable属性来使文本内容可编辑。我们还将使用许多常见的文本编辑功能，例如粗体、斜体、下划线、颜色、字体大小等。

首先，我们需要创建一个Vue实例来管理我们的编辑器状态，并将ContentEditable属性绑定到一个<div>元素上：

<template>  <div    contenteditable    @input="onInput"    ref="editor"    :class="{ 'is-empty': !content }"    :style="{ fontSize: fontSize + 'px', color: textColor }"  >    {{ content }}  </div></template><script>export default {  data() {    return {      content: '',      fontSize: 16,      textColor: '#000000'    }  },  methods: {    onInput() {      this.content = this.$refs.editor.innerHTML    }  }}</script>

我们为编辑器添加了一个contenteditable属性，以便用户可以编辑其中的文本。我们还将输入事件绑定到一个方法中，以便在用户输入时更新我们的数据。最后，我们将样式属性绑定到编辑器的属性中，以便动态设置文本的颜色和字体大小。

接下来，我们将添加各种文本样式和格式化功能。例如，我们可以使用document.execCommand()方法来添加粗体、斜体、下划线和字体颜色。下面是一个例子

methods: {  //... 			bold() {        this.content = '<b>'+this.content +'</b>';      },      italic() {        this.content = '<i>'+this.content +'</i>';      },      underline() {        this.content = '<u>'+this.content +'</u>';      },  //...}

我们还可以添加其他格式化选项，例如字体大小和对齐方式：

methods: {  //...  setFontSize(size) {    document.execCommand('fontSize', false, size)  },  setAlignment(alignment) {    document.execCommand('justify' + alignment, false, null)  }  //...}

最后，我们可以将所有这些功能绑定到Vue组件中的按钮和下拉菜单上,完整代码如下：

<template><div>    <div>        <button @click="bold">Bold</button>        <button @click="italic">Italic</button>        <button @click="underline">Underline</button>    </div>    <div>        <button @click="setFontSize(1)">Small</button>        <button @click="setFontSize(3)">Normal</button>        <button @click="setFontSize(5)">Large</button>    </div>    <div ref="editable" v-html="content" contenteditable @input="handleChange" :style="{ fontSize: fontSize + 'em' }"></div></div></template>  <script>export default {    data() {        return {            fontSize: 2,            content:'',        };    },    methods: {        bold() {            this.content = '<b>'+this.content +'</b>';        },        italic() {            this.content = '<i>'+this.content +'</i>';        },        underline() {            this.content = '<u>'+this.content +'</u>';        },        setFontSize(size) {            this.fontSize = size;        },        handleChange() {            this.content = this.$refs.editable.innerHTML;            this.$emit("input",  this.content );        },    },    mounted() {        this.$refs.editable.innerHTML = this.value;    },    props: {        value: {            type: String,            default: "",        },    },};</script>  <style scoped>div[contenteditable] {    border: 1px solid #ddd;    padding: 0.5rem;    min-height: 200px;}</style>