tinymce快速使用

tinymce

富文本编辑器

tinymce5

TinyMCE中文文档中文手册 (ax-z.cn)

tinymce4

使用

核心文件www.tiny.cloud/get-tiny/cu…

中文汉化www.tiny.cloud/get-tiny/la…

文件放置

index.html中引用

<script src="/tinymce/tinymce.min.js"></script>
<script src="/tinymce/langs/zh-Hans.js"></script>

<template>
    <div>
        <textarea :id="tinymceId"> </textarea>
        <el-button type="primary" @click="handleSubit" style="margin-top: 10px;">确定</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue' // 引入ref函数，可以生成可变长度的输入变量或输
const tinymceId = computed(() => {
    return `tiny-${Date.now()}`
})
const handleSubit = () => {

    // eslint-disable-next-line no-undef
    const content = tinymce.activeEditor.getContent()
    console.log(content)
}
onMounted(() => {
    // eslint-disable-next-line no-undef
    tinymce.init({
        selector: '#'+tinymceId.value,
        branding: false, // 右下角默认提示
        height: 600,
        plugins: 'advlist link image lists paste',  //选择需加载的插件
        paste_data_images: true, // 支图片粘贴
    })
})

</script>

<style scoped></style>