# tinymce-editor

**Repository Path**: LemonTree_7/tinymce-editor

## Basic Information

- **Project Name**: tinymce-editor
- **Description**: tinymce富文本npm包开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-24
- **Last Updated**: 2024-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tinymce 富文本 Vue2版本

组件内引入了所有相关的插件用途，包括锚点、自动链接、特殊字符、文字方向、插入编辑图片、插入编辑媒体等插件内容。
### 安装
```
npm install tinymce-editor-vue2
```

### 组件内引入插件
```
import TinymceEditorVue2 from "tinymce-editor-vue2";

export default{
    components: {
        TinymceEditorVue2
    }
}
```

### 全局引入
```
import TinymceEditorVue2 from "tinymce-editor-vue2";

Vue.use(TinymceEditorVue2);
```

### 页面使用
```
<template>
  <div>
    测试页面
    <tinymce-editor
      v-model="html"
      @imageUpload="imageUpload"
      @fileUpload="fileUpload"
      :addButton="addButton"
    ></tinymce-editor>
    <tinymce-editor
      v-model="html"
      @imageUpload="imageUpload"
      @fileUpload="fileUpload"
    ></tinymce-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: "8888",
    };
  },
  methods: {
    imageUpload(blobInfo, success, failure) {
      console.log("上传接收", blobInfo, success, failure);
    },
    fileUpload(file, callback, meta) {
      console.log("上传文件接收", file, callback, meta);
    },
    addButton(editor) {
    //   editor.ui.registry.addButton("materialspace", {
    //     text: "素材空间",
    //     icon: "image",
    //     onAction: function () {
    //       editor.windowManager.openUrl({
    //         title: "选择会议模板",
    //         url: "https://www.163.com",
    //         width: 840,
    //         height: 300,
    //       });
    //     },
    //   });
    },
  },
};
</script>

<style lang="scss" scoped></style>
```

### 组件参数
名称|用途|返回参数
---|---|---|
value/v-model|文本内容| |
toolbar | 富文本上面的用途内容|
addButton | 自定义按钮添加,具体如上图进行添加|