目录
效果展示
图片上传:
返回格式 :
{"code":0,"data":"\/uploads\/layui_editormd\/20210616\/2c403a1002622e391fb087bbf95a22ed.png","msg":"\u4e0a\u4f20\u6210\u529f"}
内置多种操作函数提供调用
数据提交
代码部分
-
后端图片上传:
/**
* @title layui富文本(单张)小图片文件上传
* @description layui富文本(单张)小图片文件上传接口说明
* @author 毕昌远
* @url /api/v1/Uploadfile/layui_domdupload
* @method post
*
* @header name:user-token require:1 default: desc:token
*
* @param name:edit type:file require:0 default: other:form文件 desc:form文件
*
* @return img:图片路径
*/
public function layui_domdupload()
{
$file = request()->file('edit');
// var_dump($file);die();
// $folder = input('param.folder');
$folder = 'layui_editormd';
$info = $file->move('./uploads/'.$folder);
if($info){
$url=str_replace('\\','/',$info->getSaveName());
$url='/uploads/'.$folder.'/'.$url;
$result = ['code'=>0,'data'=>$url,'msg'=>'上传成功'];
}else{
$result = ['code'=>1,'data'=>'','msg'=>$file->getError()];
}
echo json_encode($result);
exit();
}
-
前端代码
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layui-Tinymce</title>
</head>
<link rel="stylesheet" href="./layui/css/layui.css">
<body>
<div style="width: 90%;margin: 15px auto;">
<div class="layui-btn-group" style="margin-top: 10px">
<button class="layui-btn layui-btn-danger" lay-event="layerTiny">弹窗调用</button>
<button class="layui-btn" lay-event="setByAjax">Ajax加载数据</button>
<button class="layui-btn" lay-event="setContent">设置内容</button>
<button class="layui-btn" lay-event="insertContent">插入内容</button>
<button class="layui-btn" lay-event="getContent">获取内容</button>
<button class="layui-btn" lay-event="getText">获取文本</button>
<button class="layui-btn" lay-event="clearContent">清空内容</button>
<button class="layui-btn" lay-event="reload">重载(方式一)</button>
<button class="layui-btn" lay-event="reload2">重载(方式二)</button>
<button class="layui-btn" lay-event="destroy">销毁</button>
<button class="layui-btn" lay-event="render">加载(初始化)</button>
</div>
<hr />
<textarea name="" id="edit">这里是<span style="color: #e03e2d;height: 500px;"><em>edit初始化</em></span>的内容</textarea>
</div>
<div id="layer-tiny" style="display: none;">
<textarea name="" id="edit3"></textarea>
</div>
</body>
<script src="./layui/layui.js"></script>
<script>
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
layui.extend({
tinymce: '{/}./layui_exts/tinymce/tinymce'
}).use(['tinymce', 'util', 'layer'], function () {
var t = layui.tinymce
, util = layui.util
, layer = layui.layer
, $ = layui.$
var edit = t.render({
elem: "#edit"
, height: 800
// ...
// 其余配置可参考官方文档
},function(opt,edit){
//加载完成后回调
});
util.event('lay-event', {
// ajax
setByAjax:function() {
$.ajax({
url:'./layui_exts/mock/content.json',
success:function(res){
t.get('#edit').setContent(res.data.content)
}
})
},
layerTiny:function() {
layer.open({
type: 1
,content:$('#layer-tiny')
,success:function(){
t.render({
elem: "#edit3"
, height: 200
});
}
})
},
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',
height:500
// 所有参数都可以重新设置 ...
},function(opt,edit){
// 重载完成后回调函数,会把所有参数回传,
// 重载仅仅重新渲染编辑器,不会清空textarea,可手动清空或设置
t.get('#edit').setContent('')
})
},
reload2:function() {
t.reload('#edit',{
height:250
// 所有参数都可以重新设置 ...
},function(opt,edit){
// 重载完成后回调函数,会把所有参数回传,
// 重载仅仅重新渲染编辑器,不会清空textarea,可手动清空或设置
edit.setContent('')
})
},
destroy:function(){
t.get('#edit').destroy()
},
render:function(){
t.render({elem:'#edit',height:'300px'})
}
});
});
</script>
<style>
.tox .tox-dialog{
border: none;
}
.tox .tox-dialog,
.tox .tox-button,
.tox .tox-textarea,
.tox .tox-textfield,
.tox .tox-selectfield select,
.tox .tox-toolbar-textfield{
border-radius: 0;
}
.tox .tox-dialog-wrap__backdrop{
background-color: rgba(0, 0, 0, .3);
}
</style>
</html>
js核心包
csdn
https://download.csdn.net/download/weixin_44124842/19682748?spm=1001.2014.3001.5503
官方
https://fly.layui.com/extend/tinymce/