primevue-mirror/src/views/editor/EditorDemo.vue

45 lines
1.3 KiB
Vue
Raw Normal View History

2018-12-26 08:50:28 +00:00
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Editor</h1>
<p>Editor is rich text editor component based on Quill.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Default</h3>
2018-12-31 19:59:02 +00:00
<Editor v-model="value1" editorStyle="height: 320px"/>
2018-12-26 08:50:28 +00:00
<h3>Customized</h3>
2018-12-31 19:59:02 +00:00
<Editor v-model="value2" editorStyle="height: 320px">
2018-12-26 08:50:28 +00:00
<template slot="toolbar">
<span class="ql-formats">
2020-02-27 08:00:13 +00:00
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
2018-12-26 08:50:28 +00:00
</span>
</template>
2018-12-31 19:59:02 +00:00
</Editor>
2018-12-26 08:50:28 +00:00
</div>
2019-03-25 11:13:40 +00:00
<EditorDoc />
2018-12-26 08:50:28 +00:00
</div>
</template>
<script>
2019-03-25 11:13:40 +00:00
import EditorDoc from './EditorDoc';
2018-12-26 08:50:28 +00:00
export default {
data() {
return {
value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
value2: ''
}
2019-03-25 11:13:40 +00:00
},
components: {
'EditorDoc': EditorDoc
2018-12-26 08:50:28 +00:00
}
}
</script>