JS----TinyMCE 富文本编辑器，图片，文件上传

TinyMCE：功能强大、所见即所得的富文本编辑器

一般使用

官网及文档：https://www.tiny.cloud
官网下载：https://www.tiny.cloud/get-tiny/self-hosted/
Github：https://github.com/tinymce
文中：http://tinymce.ax-z.cn/

HTML

<textarea name="" id="editer"></textarea>

JS

var editer = tinymce.render({elem: "#editer",// 直接上传, 需要服务器返回完整的图片地址images_upload_url: uploadUrl,form: {name:'file',data:{ id: userInfo.id} },visitPrefix: filePrefix,// 文件上传回调file_picker_callback: (callback, value, meta) => {console.log("file_picker_callback")var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4',url = uploadUrl,ex = filePrefix;// 指定不同的文件类型，也可指定不同的请求接口switch (meta.filetype) {case 'image':filetype = '.jpg, .jpeg, .png, .gif';break;case 'media':filetype = '.mp3, .mp4';break;case 'file':filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx,';break;default:}var input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', filetype);input.click();input.onchange = function () {var file = this.files[0], xhr, formData;xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', url);xhr.onload = function () {if (xhr.status != 200) {console.log('HTTP Error: ' + xhr.status);return;}var res = JSON.parse(xhr.responseText);if (!res || typeof res.data != 'string') {console.log('Invalid JSON: ' + xhr.responseText);return;}if (res.code != 0 ) {failFun(res.msg);return;}callback(ex + res.data);};formData = new FormData();formData.append("file", file);xhr.send(formData);};}
}, function (opt, editer) {console.log(opt);console.log(editer)
})

提交数据

form.on('submit(notice-list-add-submit)', function (data) {layer.load(2);data.field.content = tool.HTMLEncode(tinymce.get("#editer").getContent());$(this).html('提交中...').prop('disabled', true);admin.req({url: url,data: data.field,success: (res) => {layer.closeAll('loading');if (res.code === 0) {layer.msg(res.msg, {icon: 1, time: 2000}, function () {admin.reload()})} else {layer.msg(res.msg);$(this).html('提交').prop('disabled', false);}},error(e) {layer.closeAll('loading');$(this).html('提交').prop('disabled', false);}});return false;
});

一般方法

HTMLEncode: function (html) {var temp = document.createElement("div");(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);var output = temp.innerHTML;temp = null;return output;
}function reload() {tinymce.reload({elem: "#editer",}, function () {tinymce.get("#editer").setContent("");})
}function destroy() {tinymce.get("#editer").destroy()
}function initTinymce() {tinymce.render({elem: "#editer"})
}

JS----TinyMCE 富文本编辑器，图片，文件上传相关推荐

JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
富文本编辑器CKeditor文件上传下载SmartUpload插件
目录富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
富文本编辑器图片url上传
官方文档:http://tinymce.ax-z.cn/general/upload-images.php //引入axios import axios from "axios路径" ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
富文本wangeditor图片自定义上传及图片删除
富文本编辑器的组件有很多像:百度的UEditor ,Vue-Quill-Editor,以及wangeditor. 组件的选择根据自己业务需求选择,本文选用的是wangeditor. 首先说一下业务需求 ...
ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
下载UEditor 下载完整源码和JSP版本 Spring后端集成 1. 解压完整源码,拷贝jsp目录下的java源码,到spring mvc后端 jsp目录下java源码集成spring mvc后 ...
layui富文本编辑器layedit增加上传视频与音频功能
改动效果: layui2.4.3并没有视频.音频等上传功能,不过还好,目前有一个基于layui2.4.3的layedit扩展,增加了视频上传.字体颜色等等. 首先去下载一个layedit扩展文件:中转 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...

JS----TinyMCE 富文本编辑器，图片，文件上传

一般使用

HTML

JS

提交数据

一般方法

JS----TinyMCE 富文本编辑器，图片，文件上传相关推荐

最新文章

热门文章