<template>
|
<el-main>
|
<el-card shadow="never">
|
<sc-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></sc-editor>
|
</el-card>
|
<el-card shadow="never" header="配置" style="margin-top: 20px;">
|
<el-descriptions border :column="1">
|
<el-descriptions-item label="v-model">绑定的内容</el-descriptions-item>
|
<el-descriptions-item label="placeholder">占位符</el-descriptions-item>
|
<el-descriptions-item label="height">编辑器高度，默认300</el-descriptions-item>
|
<el-descriptions-item label="disabled">禁用编辑器 Boolean</el-descriptions-item>
|
<el-descriptions-item label="templates">插入自定义模板 Array</el-descriptions-item>
|
<el-descriptions-item label="toolbar">自定义工具栏，使用"|"竖杠分割，使用"\"斜杠分组，默认：'undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
|
alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
|
image media table template preview | code selectall'</el-descriptions-item>
|
<el-descriptions-item label="options">支持tinymce的其他配置项</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-main>
|
</template>
|
|
<script>
|
import { defineAsyncComponent } from 'vue';
|
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
|
|
export default {
|
name: "editor",
|
components: {
|
scEditor
|
},
|
data(){
|
return {
|
html: '',
|
templates: [
|
{
|
title: '自定义HTML模板',
|
description: '',
|
content: '<strong>演示模板</strong>'
|
},
|
{
|
title: '列表',
|
description: '',
|
content: '<ol><li>演示列表1</li><li>演示列表2</li></ol>'
|
}
|
]
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
