# layui-tinymce

**Repository Path**: qtxiaoniao/layui-tinymce

## Basic Information

- **Project Name**: layui-tinymce
- **Description**: 基于 Chick 已有的layui-tinymce 封装增加视频上传和多图上传
- **Primary Language**: HTML/CSS
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2020-09-30
- **Last Updated**: 2025-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-tinymce-f

#### 介绍
基于 Chick 已有的layui-tinymce 封装增加视频上传和多图上传

#### layui-tinymce-f
[layui-tinymce](https://gitee.com/chick1993/layui-tinymce) |[ tinymce中文文档](http://tinymce.ax-z.cn/)

#### 使用
   ##### 1.页面

```
 <textarea name="" id="edit">这里是<span style="color: #e03e2d;"><em>edit初始化</em></span>的内容</textarea>
```
   ##### 2.js

```
  layui.extend({
        tinymce: '{/}./tinymce/tinymce'
    }).use(['tinymce', 'util', 'layer'], function () {
        var t = layui.tinymce
        var util = layui.util;

        var edit = t.render({
            elem: "#edit"
            , height: 600
	    ,images_upload_url: "http://127.0.0.1:8080/file/tinymce/upload"//文件上传地址
            // ...
            // 其余配置可参考官方文档
        },function(opt){
            //加载完成后回调
        });


        util.event('lay-event', {
            getContent:function() {
                var content = t.get('#edit').getContent()
                console.log(content)
                layer.alert(content)
            },
            setContent:function() {
                t.get('#edit').setContent('点击按钮设置的内容：<span style="color: #e03e2d;">' + new Date()+'</span>')
            },
            clearContent:function() {
                t.get('#edit').setContent('')
            },
            insertContent:function() {
                t.get('#edit').insertContent('<b>插入内容</b>')
            },
            getText:function() {
                var text = t.get('#edit').getContent({format:'text'})
                layer.alert(text)
            },
            reload:function() {
                t.reload({
                    elem:'#edit'
                    // 所有参数都可以重新设置 ...
                },function(opt){
                    //重载完成后回调函数，会把所有参数回传，
                    //重载仅仅重新渲染编辑器，不会清空textarea，可手动清空或设置
                    t.get('#edit').setContent('')
                })
            },
            destroy:function(){
                t.get('#edit').destroy()
            },
            render:function(){
                t.render({elem:'#edit',height:'500px'})
            }
        });


    });
```
#### 效果   
##### 1.主页面
![主页面](https://images.gitee.com/uploads/images/2020/0930/114901_6473af05_1160498.png "在这里输入图片标题")
##### 2.视频上传
![视频上传](https://images.gitee.com/uploads/images/2020/0930/115016_867d486f_1160498.png "屏幕截图.png")

##### 3.多图上传

![多图上传](https://images.gitee.com/uploads/images/2020/0930/115039_b8c4a39b_1160498.png "屏幕截图.png")

#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)