新需求

zxl

5 天以前 29ea0fd5d04dbaac800f211e0ac7701de0a7f3f4

 src/components/Editor/index.vue

@@ -157,6 +157,17 @@
    init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);
      // 新增：编辑区域点击聚焦逻辑
      const qlEditor = editor.querySelector('.ql-editor');
      if (qlEditor && !this.readOnly) {
        qlEditor.addEventListener('click', () => {
          this.Quill.focus(); // 点击时强制聚焦
        });
        if (!this.currentValue) {
          qlEditor.classList.add('ql-blank'); // 空内容时显示占位符
        }
      }

      // 如果设置了上传地址则自定义图片上传事件
      if (this.type == 'url') {
        let toolbar = this.Quill.getModule("toolbar");
@@ -224,7 +235,23 @@
</script>

<style>
.editor,
.editor {
  position: relative;
  line-height: normal !important;
}
.ql-editor {
  min-height: inherit !important; /* 继承父容器的min-height */
  height: 100% !important; /* 占满父容器高度 */
  cursor: text; /* 显示文本光标，提示可点击 */
  padding: 12px 15px; /* 扩大点击范围 */
  box-sizing: border-box; /* 内边距不超出容器 */
}
.ql-editor.ql-blank::before {
  content: attr(data-placeholder);
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
  pointer-events: none; /* 不影响点击事件 */
}
.ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;