代码拉取完成,页面将自动刷新
若需要使用最新版的tinymce可自行到官网下载,替换layui_exts/tinymce/tinymce目录
在线预览 | Layui论坛 | tinymce中文文档
2021.01.04 tinymce更新到5.6.2
2020.11.06 tinymce更新到5.5.1,上传图片时支持自定义字段名、支持同时上传其他数据
2020.08.24 tinymce更新到5.4.2
食用方式可参考tinymce官方文档
layui.extend({
tinymce: '{/}./tinymce/tinymce'
}).use(['tinymce'], function () {
var t = layui.tinymce
// code ...
// 后面无特殊说明,其它代码均写在此处
// ...
})
<textarea id="edit"></textarea>
t.render({
elem: "#edit"
// 支持tinymce所有配置
},(opt, edit)=>{
// 加载完成后回调 opt 是传入的所有参数
// edit是当前编辑器实例,等同于t.get返回值
});
// 方式一
t.reload({
elem:'#edit'
// 除elem外,所有参数都可以重新设置
},(opt, edit) => {
//重载完成后回调函数,会把所有参数回传,
//重载仅仅重新渲染编辑器,不会清空textarea
})
// 方式二
t.reload('#edit',{
// 除elem外,所有参数都可以重新设置
},(opt, edit) => {
})
// 如果页面只有一个编辑器,等同于官方的tinymce.activeEditor
// 如果页面有多个编辑器,等同于官方tinymce.editors[id]
var edit = t.get('#edit')
// 获取编辑器HTML内容
edit.getContent()
// 获取编辑器文本内容
edit.getContent({format:'text'})
edit.insertContent('<b>插入内容</b>')
edit.setContent('<b>设置内容</b>')
// 清空编辑器,将内容设置为空字符串即可
edit.setContent('')
edit.resetContent()
edit.destroy()
var settings = {
images_upload_url:'http(s)://yoursite/apipath'
// ...
}
t.render({
images_upload_url:'http(s)://yoursite/apipath'
// ...
})
// 上传配置
t.render({
elem: "#edit"
,images_upload_url:'http(s)://yoursite/apipath'//配置上传接口
,form:{
name:'avatar'//配置上传文件的字段名称
,data:{ key:'value', ... } //其他需要一起上传的数据
}
});
// 如果没有做任何修改,
// layui-admin中以admin设置为准;单独引用默认的后端返回数据格式需要如下
// {"code": 0, "msg": "success", "data": "/demo/demo.jpg"},
// code-等于0表示成功,msg-返回的消息,data-返回给前端的图片地址
// 回调函数 参数1:上传的文件数据,参数2:上传成功回调,参数3:上传异常回调
t.render({
elem: "#edit"
,images_upload_handler:function(blobInfo, succFun, failFun){
// 你的代码 ...
}
})
查看原版文档
t.render({
elem: "#edit"
, height: 200
, init_instance_callback : function(ed) {
ed.on('Click', function (e) {
// 监听编辑器内部的点击事件
});
}
});
事件 | 描述 |
---|---|
Click | 单击编辑器时触发 |
DblClick | 双击编辑器时触发 |
MouseDown | 在编辑器中按下鼠标按钮时触发 |
MouseUp | 在编辑器中释放鼠标按钮时触发 |
MouseMove | 在编辑器中移动鼠标时触发 |
MouseOver | 鼠标移入时触发 |
MouseOut | 鼠标移出时触发 |
MouseEnter | 当鼠标进入编辑器时触发 |
MouseLeave | 当鼠标离开编辑器时触发 |
KeyDown | 在编辑器中按某个键时触发 |
KeyPress | 在编辑器中按下某个键时触发 |
KeyUp | 在编辑器中释放键时触发 |
ContextMenu | 在编辑器中调用上下文菜单时触发 |
Paste | 在编辑器中完成粘贴时触发 |
事件 | 描述 |
---|---|
Init | 在编辑器初始化时触发 |
Focus | 当编辑器聚焦时触发 |
Blur | 编辑器失去焦点时触发 |
BeforeSetContent | 在内容设置之前触发 |
SetContent | 在内容设置时触发 |
GetContent | 在获取内容时触发 |
PreProcess | 在序列化编辑器中的内容时触发 |
PostProcess | 在提交编辑器中的内容时触发 |
NodeChange | 更改编辑器中的选择时触发 |
Undo | 当内容恢复到以前的状态时触发 |
Redo | 还原撤消事件时触发 |
Change | 内容改变时触发 |
Dirty | Fires when editor contents are being considered dirty |
Remove | 删除编辑器时触发 |
ExecCommand | 在执行命令后触发 |
layui_exts\tinymce\tinymce\skins\ui\oxide\skin.min.css 这个文件里的所有大于1的z-index后面加五个0
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型