点击选择框，光标消失？

• Z时代
• 2024-03-14
• 分类：IT

vue"><template>
  <div>
    <!-- <textarea v-model="text" @click="textr"></textarea> -->
    <div contenteditable="true" @click="textr" ref="editor" id="editor">
      {{ content }}
    </div>
    <div class="flex" style="justify-content: center">
      <el-button @click="toggleBold">加粗</el-button>
      <el-button @click="toggleUnderline">下划线</el-button>
      <el-button @click="toggleItalic">斜体</el-button>
      <el-input
        type="color"
        v-model="color"
        @input="changeColor"
        style="width: 50px"
      />
      <el-select v-model="fontSize" @change="changeFontSize" id="fontSize" @click="handleClick">
        <el-option  @click="handleClick"
          v-for="data in fontSizeData"
          :key="data.label"
          :value="data.value"
        >
          {{ data.label }}
        </el-option>
      </el-select>
      <el-select v-model="font" @change="changeFont" id="font">
        <el-option value="Arial">Arial</el-option>
        <el-option value="Verdana">Verdana</el-option>
        <el-option value="Times New Roman">Times New Roman</el-option>
      </el-select>
      <el-button @click="insertImage">插入图片</el-button>
    </div>
    <div>{{ formattedText }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '',
      htmlText: '',
      isBold: false,
      isUnderline: false,
      isItalic: false,
      color: '#000000',
      fontSizeData: [],
      fontSize: '17px',
      font: 'Arial',
      selectionStart: 0,
      selectionEnd: 0
    };
  },
  created() {
    this.fontSizeData = []
    for (let i = 17; i <= 40; i++) {
      this.fontSizeData.push({ label: i, value: i })
    }
  },
  mounted() {
  },
  methods: {
    handleClick(event) {
  // 阻止事件冒泡传递到编辑器中
  event.stopPropagation();
  // 其他处理逻辑
  // ...
},
    toggleBold() {
      document.execCommand("bold");
    },
    toggleUnderline() {
      document.execCommand("underline");
    },
    toggleItalic() {
      document.execCommand("italic");
    },
    changeColor() {
      // Handle color change logic
      document.execCommand("foreColor", false, this.color);
    },
    changeFontSize() {
      // Handle font size change logic
      document.execCommand("fontSize", false, this.fontSize)
    },
    changeFont() {
      // Handle font change logic
      document.execCommand("fontName", false, this.font);
    },
    insertImage() {
      // Handle image insertion logic
    },
    textr(e) {
      this.selectionStart = e.target.selectionStart
      this.selectionEnd = e.target.selectionEnd
      this.select = window.getSelection().toString()
      console.lo
    }
  },
  computed: {
    formattedText() {
      return ''
    }
  }
};
</script>
<style lang="scss" scoped>
div[contenteditable="true"] {
  border: 1px solid #cfcbcb;
  width: 80%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 6px #efefef;
  outline: none;
  text-align: start;
  padding: 10px;
}
div[contenteditable="true"]:focus {
  border-color: #666666;
}
</style>

这份代码，现在有一个问题就是点击选择框，编辑器的光标就消失了，使用@click.prevent并不会成功
需要保留光标以及选中文本

回答：

我解决了，绑定v-on:blur="focus"

  然后focus里面this.$refs.editor.focus();

以上是 点击选择框，光标消失？ 的全部内容， 来源链接： utcz.com/p/934827.html