VUE - QUASAR - TIPTAP - Как установить высоту CSS для внутреннего элемента редактора
Как я могу заставить внутреннюю часть редактора (которая выделена тонкой синей линией) выйти на полную высоту. Это внутренний элемент, который создается редактором подсказки:
<div contenteditable="true" tabindex="0" class="ProseMirror" spellcheck="false"> Editable content goes here./div>
ОБНОВИТЬ:
Я вручную добавил классы ("col" и "column") в визуализированный вывод, и теперь он работает так, как я хочу. Есть ли способ сделать это, не обращаясь к свойству класса элемента?
<div contenteditable="true" tabindex="0" class="ProseMirror col column" spellcheck="false"> Content Here </div>
Вот код компонента, который я использую в моем примере приложения квазара. Я пробовал бесчисленное количество различных вариантов классов в разделах вокруг редактора. Ничего из того, что я делаю, похоже, не влияет на результирующий "contenteditable" контейнер div выше.
<template>
<q-page class="column justify-start">
<div class="column col absolute-full bg-secondary">
<div class="col column editor">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar">
<button
class="menubar__button"
:class="{ 'is-active': isActive.bold() }"
@click="commands.bold"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.italic() }"
@click="commands.italic"
>
<icon name="italic" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.strike() }"
@click="commands.strike"
>
<icon name="strike" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.underline() }"
@click="commands.underline"
>
<icon name="underline" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.code() }"
@click="commands.code"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.paragraph() }"
@click="commands.paragraph"
>
<icon name="paragraph" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
@click="commands.heading({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
@click="commands.heading({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
@click="commands.heading({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.bullet_list() }"
@click="commands.bullet_list"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.ordered_list() }"
@click="commands.ordered_list"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.blockquote() }"
@click="commands.blockquote"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.code_block() }"
@click="commands.code_block"
>
<icon name="code" />
</button>
<button
class="menubar__button"
@click="commands.horizontal_rule"
>
<icon name="hr" />
</button>
<button
class="menubar__button"
@click="commands.undo"
>
<icon name="undo" />
</button>
<button
class="menubar__button"
@click="commands.redo"
>
<icon name="redo" />
</button>
</div>
</editor-menu-bar>
<editor-content class="col column editor__content" :editor="editor" />
</div>
</div>
</q-page>
</template>
<script>
import Icon from 'components/Icon'
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
Blockquote,
CodeBlock,
HardBreak,
Heading,
HorizontalRule,
OrderedList,
BulletList,
ListItem,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
Strike,
Underline,
History
} from 'tiptap-extensions'
export default {
components: {
EditorContent,
EditorMenuBar,
Icon
},
data () {
return {
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new HorizontalRule(),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Link(),
new Bold(),
new Code(),
new Italic(),
new Strike(),
new Underline(),
new History()
],
content: `
<h2>
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
</li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing
<br />
– mom
</blockquote>
`
})
}
},
beforeDestroy () {
this.editor.destroy()
}
}
</script>
<style>
</style>
Я изучаю набор инструментов Vue.js и Quasar UI. Я хочу использовать компонент редактора TIPTAP WYSIWYG (доступен здесь: https://github.com/scrumpy/tiptap). Я в порядке с их примерами, могу заставить компонент загружаться и работать нормально. Но, хоть убей, я не могу понять, как заставить внутреннюю часть редактирования (которая выделяется синим цветом, когда вы нажимаете на нее) с самого начала переходила в "полную высоту".
Я перепробовал все, что мог придумать, искал и искал какой-то пример. Редактор расширяется (растет) нормально, когда вы добавляете контент, но по какой-то причине я не могу заставить его запускаться в полную высоту - что, я отмечу, пример также не иллюстрирует.
Что я не делаю?
1 ответ
Попробуйте написать это на css
//remove outline
.ProseMirror:focus {
outline: none;
}
// set
.ProseMirror {
min-height: 100px;
max-height: 100px;
overflow: scroll;
}