watt-editor

介绍

引入

import { createApp } from 'vue'
import { WattEditor } from 'wattpc-ui'

createApp().use(WattEditor)

代码演示

基础使用

内容编辑

<template>
    <div>
        <watt-editor v-model="content" />
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const content = ref(`
    <h1>hello vue3-tinymce!</h1>  
    <div>hello vue3-tinymce!</div>
`)
</script>

显示代码

复制代码片段

图片上传

媒体上传

<template>
    <div>
        <watt-editor v-model="formState.content" />
    </div>
</template>
<script setup>
import { reactive, watch } from 'vue'

const formState = reactive({
    content: `
        <h1>hello vue3-tinymce!</h1>  
        <div>hello vue3-tinymce!</div>
        <div>&nbsp;</div>
        <div><img src="https://static.jsvue.cn/tinymce/5178071078d2c626d9819d7ab6768b04.jpg" alt="" width="580" height="580"></div>
        <div>&nbsp;</div>
        <div>
        <pre class="language-javascript"><code>import { createApp } from 'vue'
        import { WattJsonEditor } from 'wattpc-ui'

        createApp().use(WattJsonEditor)</code></pre>
        </div>
    `
})
</script>

显示代码

复制代码片段