VUE - QUASAR - TIPTAP - 如何在编辑器的内部元素上设置 CSS 高度

Question

如何使内部编辑器部分（用细蓝线突出显示）达到全高。这是由tiptap 编辑器创建的内部元素：

\n\n

<div contenteditable="true" tabindex="0" class="ProseMirror" spellcheck="false"> Editable content goes here./div>\n

\n\n

更新：

\n\n

我在渲染的输出中手动添加了类（\'col\' 和 \'column\'），现在它按照我想要的方式工作。有没有一种方法可以做到这一点而不必访问元素的类属性？

\n\n

<div contenteditable="true" tabindex="0" class="ProseMirror col column" spellcheck="false"> Content Here </div>\n

\n\n

这是我在类星体示例应用程序中使用的组件代码。我在编辑器周围的 div 中尝试了无数种不同的类变体。我所做的任何事情似乎都不会影响上面生成的“contenteditable”div 容器。

\n\n

<template>\n  <q-page class="column justify-start">\n      <div class="column col absolute-full bg-secondary">\n        <div class="col column editor">\n          <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">\n            <div class="menubar">\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.bold() }"\n                @click="commands.bold"\n              >\n                <icon name="bold" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.italic() }"\n                @click="commands.italic"\n              >\n                <icon name="italic" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.strike() }"\n                @click="commands.strike"\n              >\n                <icon name="strike" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.underline() }"\n                @click="commands.underline"\n              >\n                <icon name="underline" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.code() }"\n                @click="commands.code"\n              >\n                <icon name="code" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.paragraph() }"\n                @click="commands.paragraph"\n              >\n                <icon name="paragraph" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.heading({ level: 1 }) }"\n                @click="commands.heading({ level: 1 })"\n              >\n                H1\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.heading({ level: 2 }) }"\n                @click="commands.heading({ level: 2 })"\n              >\n                H2\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.heading({ level: 3 }) }"\n                @click="commands.heading({ level: 3 })"\n              >\n                H3\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.bullet_list() }"\n                @click="commands.bullet_list"\n              >\n                <icon name="ul" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.ordered_list() }"\n                @click="commands.ordered_list"\n              >\n                <icon name="ol" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.blockquote() }"\n                @click="commands.blockquote"\n              >\n                <icon name="quote" />\n              </button>\n\n              <button\n                class="menubar__button"\n                :class="{ \'is-active\': isActive.code_block() }"\n                @click="commands.code_block"\n              >\n                <icon name="code" />\n              </button>\n\n              <button\n                class="menubar__button"\n                @click="commands.horizontal_rule"\n              >\n                <icon name="hr" />\n              </button>\n\n              <button\n                class="menubar__button"\n                @click="commands.undo"\n              >\n                <icon name="undo" />\n              </button>\n\n              <button\n                class="menubar__button"\n                @click="commands.redo"\n              >\n                <icon name="redo" />\n              </button>\n\n            </div>\n          </editor-menu-bar>\n          <editor-content class="col column editor__content" :editor="editor" />\n        </div>\n      </div>\n  </q-page>\n</template>\n\n<script>\nimport Icon from \'components/Icon\'\nimport { Editor, EditorContent, EditorMenuBar } from \'tiptap\'\nimport {\n  Blockquote,\n  CodeBlock,\n  HardBreak,\n  Heading,\n  HorizontalRule,\n  OrderedList,\n  BulletList,\n  ListItem,\n  TodoItem,\n  TodoList,\n  Bold,\n  Code,\n  Italic,\n  Link,\n  Strike,\n  Underline,\n  History\n} from \'tiptap-extensions\'\n\nexport default {\n  components: {\n    EditorContent,\n    EditorMenuBar,\n    Icon\n  },\n  data () {\n    return {\n      editor: new Editor({\n        extensions: [\n          new Blockquote(),\n          new BulletList(),\n          new CodeBlock(),\n          new HardBreak(),\n          new Heading({ levels: [1, 2, 3] }),\n          new HorizontalRule(),\n          new ListItem(),\n          new OrderedList(),\n          new TodoItem(),\n          new TodoList(),\n          new Link(),\n          new Bold(),\n          new Code(),\n          new Italic(),\n          new Strike(),\n          new Underline(),\n          new History()\n        ],\n        content: `\n          <h2>\n            Hi there,\n          </h2>\n          <p>\n            this is a very <em>basic</em> example of tiptap.\n          </p>\n          <pre><code>body { display: none; }</code></pre>\n          <ul>\n            <li>\n              A regular list\n            </li>\n            <li>\n              With regular items\n            </li>\n          </ul>\n          <blockquote>\n            It\'s amazing \n            <br />\n            \xe2\x80\x93 mom\n          </blockquote>\n        `\n      })\n    }\n  },\n  beforeDestroy () {\n    this.editor.destroy()\n  }\n}\n</script>\n\n<style>\n</style>\n

\n\n

我一直在学习 Vue.js 和 Quasar UI 工具集。我想使用 TIPTAP WYSIWYG 编辑器组件（可在此处获取：https: //github.com/scrumpy/tiptap）。我对他们的示例很满意，我可以让组件加载并正常工作。但就我的一生而言，我无法弄清楚如何让内部编辑部分（当您单击它时，它会以蓝色勾勒出轮廓）从一开始就进入“全高度”。

\n\n

我已经尝试了我能想到的一切，并搜索并搜索某种示例。当您添加内容时，编辑器会很好地扩展（增长），但由于某种原因，我无法让它以全高度启动——我会注意到该示例也没有说明这一点。

\n\n

我不做什么？

\n

Answer 1

尝试在 css 上写这个

/* remove outline */
.ProseMirror:focus {
  outline: none;
}
/* set */
.ProseMirror {        
  min-height: 100px;
  max-height: 100px;
  overflow: scroll;
}