JS实现 带有话题的文本编辑 + 图片编辑(上)

效果图展示:

 

 

这是一个比较简易的文本编辑框显示,此文主要讲文本编辑相关~

文本编辑实现原理分析:

1. 一般涉及到文本编辑,我们通常会使用 input 输入框来实现,但是像一些需要含有特殊样式标题的文本编译框,input 显然满足不了我们的需求,这时候我们需要用到一个可以使任何元素都可以具有编辑功能的属性: contenteditable 只需要在元素上设置contenteditable="true",该元素即可进行编辑
2. 默认进入该页面时,文本框聚焦,通过 directives 设置 自定义指令
3. 编辑的文本要默认设置好相关标题长度的距离,不然会和标题重叠在一起, 可以通过 text-indent 这个设置首行缩进距离的属性解决,由于标题是动态获取的数据,所以设置时不能写死,所以要根据标题长度进行设置
4. 编辑好的内容 通过 input事件去获取

以上就是js实现带有不同样式标题的文本编辑方式重要点

 

核心代码

html:

<template>
  <div class="nineImgs_wrap">
    <div class="edit_container">
      <span class="title">#{{title}}#</span>
      <div
        class="edit_box"
        contenteditable="true"
        v-html="message"
        ref="editBox"
        id="editBox"
        @input="changeText"
        v-focus
        :style="{'text-indent':indentNumber + 'em'}"
      ></div>
    </div>
  </div>
</template>

View Code