Hamlet-Web

Appearance

Editor ​

富文本编辑器，基于 wangEditor 二次封装。

WARNING

目前受 Vitepress 框架限制，此文档暂时无在线示例， 详见。

基础用法 ​

vue
<template>
    <demo-block>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="内容" prop="content">
                <ham-editor
                    v-model="ruleForm.content"
                    :headers="headers"
                    :uploadImageConfig="{ repository: 'ibu' }"
                />
            </el-form-item>
        </el-form>
        <el-button style="margin-left: 50px" type="primary" @click="submit(ruleFormRef)">
            提交
        </el-button>
    </demo-block>
</template>

<script setup>
import { ref, reactive } from 'vue'

const ruleFormRef = ref()

const ruleForm = reactive({
    content: '<p>Hello Gauss</p>',
})

const headers = {
    authorization:
        'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlYjliMjQ5NWZmYzdkOGVlNGYwZWE2YmQyNzczM2M3NCIsImF1dGgiOlt7ImF1dGhvcml0eSI6IlJPTEVfQ0FTSElFUiJ9XSwiaWF0IjoxNjcxNTkxNTc5LCJleHAiOjE2NzE3MjExNzl9.bLTD9QvXR_JtnAvm_6HiOY1m23BDVYROYX10ueLpfok',
}

const rules = reactive({
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})

async function submit(formEl) {
    if (!formEl) return
    await formEl.validate(valid => {
        if (valid) {
            console.log(ruleForm.content)
        }
    })
}
</script>
<template>
    <demo-block>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="内容" prop="content">
                <ham-editor
                    v-model="ruleForm.content"
                    :headers="headers"
                    :uploadImageConfig="{ repository: 'ibu' }"
                />
            </el-form-item>
        </el-form>
        <el-button style="margin-left: 50px" type="primary" @click="submit(ruleFormRef)">
            提交
        </el-button>
    </demo-block>
</template>

<script setup>
import { ref, reactive } from 'vue'

const ruleFormRef = ref()

const ruleForm = reactive({
    content: '<p>Hello Gauss</p>',
})

const headers = {
    authorization:
        'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlYjliMjQ5NWZmYzdkOGVlNGYwZWE2YmQyNzczM2M3NCIsImF1dGgiOlt7ImF1dGhvcml0eSI6IlJPTEVfQ0FTSElFUiJ9XSwiaWF0IjoxNjcxNTkxNTc5LCJleHAiOjE2NzE3MjExNzl9.bLTD9QvXR_JtnAvm_6HiOY1m23BDVYROYX10ueLpfok',
}

const rules = reactive({
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})

async function submit(formEl) {
    if (!formEl) return
    await formEl.validate(valid => {
        if (valid) {
            console.log(ruleForm.content)
        }
    })
}
</script>

仅展示 ​

vue
<template>
    <demo-block>
        <ham-editor
            v-model="content"
            :readOnly="true"
            editorHeight="100%"
        />
    </demo-block>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('<p>Hello Gauss</p><p style=\"text-align: center;\"><blockquote><u><em><strong> </strong></em></u><a href=\"https://btfy.ur1.fun/?q=5ZGo5Lyf\" target=\"_blank\">点击查看生平信息</a> </blockquote><img src=\"https://cloud-minio-test.tineco.com/tineco-cloud/it-project-manage/1815209477355429890.jpg\" alt=\"image_sharp.png\" data-href=\"\" style=\"\"></p>')
</script>
<template>
    <demo-block>
        <ham-editor
            v-model="content"
            :readOnly="true"
            editorHeight="100%"
        />
    </demo-block>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('<p>Hello Gauss</p><p style=\"text-align: center;\"><blockquote><u><em><strong> </strong></em></u><a href=\"https://btfy.ur1.fun/?q=5ZGo5Lyf\" target=\"_blank\">点击查看生平信息</a> </blockquote><img src=\"https://cloud-minio-test.tineco.com/tineco-cloud/it-project-manage/1815209477355429890.jpg\" alt=\"image_sharp.png\" data-href=\"\" style=\"\"></p>')
</script>

属性 ​

属性名说明类型可选值默认值
v-model内容 HTMLstring
editorHeight编辑器高度number string320px
readOnly是否只读booleanfalse
excludeToolbarKeys排除某些工具栏菜单string[]['group-video']
uploadImageConfig上传图片配置UploadImageConfig
headers自定义增加 http headerobject

UploadImageConfig ​

属性名说明类型可选值默认值
server服务地址string/basic/file/upload/multi?repository=
repository仓库地址，必填string
maxFileSize单个文件的最大体积限制，默认 5Mnumber5 * 1024 * 1024
maxNumberOfFiles最多可上传几个文件number5
allowedFileTypes选择文件时的类型限制string[]
timeout超时时间，默认 15snumber15 * 1000

事件 ​

事件名说明参数
change内容改变时的回调(editor: IDomEditor) => void