# TinymceEditor

**Repository Path**: wo-com/tinymce-editor

## Basic Information

- **Project Name**: TinymceEditor
- **Description**: Vue3 + Tinymce富文本编辑器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-29
- **Last Updated**: 2023-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vue3使用tinymce富文本编辑器

> tinymce中文文档：http://tinymce.ax-z.cn/



首先下载我的Demo到你的本地，Demo地址：https://gitee.com/szxio/tinymce-editor

第一步：将我项目中的 `public` 下的 `tinymce` 文件夹复制到你的 `public` 目录中去

![image-20230828113248948](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230828113248948.png)

第二步：复制 `src/components` 下的 `TinymceEditor` 组件到你的项目中

![image-20230828132423562](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230828132423562.png)

第三步：使用，下面是一个案例代码

```vue
<template>
  <div class="d-flex">
    <div style="width: 50%">
      <TinymceEditor v-model="content" @input="inputContent"/>
    </div>
    <div class="right" v-html="content"></div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import TinymceEditor from "../components/TinymceEditor"

const content = ref("Hello World")

const inputContent = (newVal) => {
  console.log(newVal)
  content.value = newVal
}
</script>

<style scoped lang="scss">
.d-flex {
  display: flex;
  gap: 10px;

  .right {
    flex: 1;
    box-shadow: 0 1px 10px 3px #dbdbdb;
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
```

最后在你的项目中安装依赖，启动看效果

```bash
npm i @tinymce/tinymce-vue
```

效果展示

![image-20230828112936582](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230828112936582.png)