打造自己的编辑器!使用contenteditable属性开发自定义编辑器

你是否在寻找一种简单易用的方式来创建自己的在线编辑器？使用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>