.editor
editor-menu-bar.menubar.is-hidden(:editor='editor'
:keep-in-bounds='true' v-slot='{ commands, isActive, getMarkAttrs, focused }')
v-btn-toggle(dense :class="{ focused }")
v-btn(icon text
:class="{ primary: isActive.bold() }"
@click="commands.bold")
v-icon mdi-format-bold
v-btn(icon text
:class="{ primary: isActive.underline() }"
@click="commands.underline")
v-icon mdi-format-underline
v-btn(icon text
:class="{ primary: isActive.strike() }"
@click="commands.strike")
v-icon mdi-format-strikethrough-variant
v-btn(icon text
:class="{ primary: isActive.italic() }"
@click="commands.italic")
v-icon mdi-format-italic
v-btn(icon text
:class="{ primary: isActive.heading({level: 1}) }"
@click="commands.heading({level: 1})")
v-icon mdi-format-header-1
v-btn(icon text
:class="{ primary: isActive.heading({level: 2}) }"
@click="commands.heading({level: 2})")
v-icon mdi-format-header-2
v-btn(icon text
:class="{ primary: isActive.heading({level: 3}) }"
@click="commands.heading({level: 3})")
v-icon mdi-format-header-3
v-btn(icon text
:class="{ primary: isActive.code() }"
@click="commands.code")
v-icon mdi-code-tags
v-btn(icon text
:class="{ primary: isActive.blockquote() }"
@click="commands.blockquote")
v-icon mdi-format-quote-open
v-btn(icon text
:class="{ primary: isActive.bullet_list() }"
@click="commands.bullet_list")
v-icon mdi-format-list-bulleted
v-btn(icon text :class='{ primary: isActive.link() }'
@click='commands.link({href: ""}); $refs.link.focus(); linkActive=true')
v-icon mdi-link
//- v-btn-toggle.menububble(:class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`")
v-popover(trigger='hover' placement='bottom-start')
v-btn.float-left(slot='reference' size='mini')
template
span This editor supports inline markdown
div → Title ⇒ Start a line with #
div → Bold ⇒ ctrl+b
div → Italic ⇒ ctrl+i
div → Underline ⇒ ctrl+u
div → List ⇒ Start a line with -
div → Ordered List ⇒ Start a line with 1.
div → Quote ⇒ Start a line with >
div → Code ⇒ Use backtick `
div → Link ⇒ Select a word and fill the input
//- el-button(size='mini' :class='{ "is-active": isActive.heading({level:4})}' @click='commands.heading({level: 4})')
//- el-button(size='mini' :class='{ "is-active": isActive.bold() }' @click='commands.bold')
//- el-button(size='mini' :class='{ "is-active": isActive.italic() }' @click='commands.italic')
//- el-button(size='mini' :class='{ "is-active": isActive.underline() }' @click='commands.underline')
v-btn(size='mini' :class='{ "is-active": isActive.link() }' @click='commands.link({href: ""}); $refs.link.focus(); linkActive=true')
input(:value='isActive.link() && getMarkAttrs("link") && getMarkAttrs("link").href || ""' ref='link' :class='{ "is-active": isActive.link() || linkActive }'
placeholder='https://' @keypress.enter='commands.link({ href: $event.target.value})')
//- el-button(size='mini' :class='{ "is-active": isActive.strike() }' @click='commands.strike')
//- br
//- el-button-group
//- el-button(size='mini' :class='{ "is-active": isActive.code() }' @click='commands.code')
//- el-button(size='mini' :class='{ "is-active": isActive.bullet_list() }' @click='commands.bullet_list')
//- //- el-button(size='mini' :class='{ "is-active": isActive.ordered_list() }' @click='commands.ordered_list')
//- el-button(size='mini' :class='{ "is-active": isActive.blockquote() }' @click='commands.blockquote')
//- el-button.float-right(v-if='!noSave' size='mini' type='success' plain icon='el-icon-check'
//- @click='$emit("save", editor.getHTML())') {{$t('common.save')}}
editor-content.content(:editor='editor' spellcheck='false' :style="{ 'max-height': maxHeight }")