tinymce 富文本编辑器配置粘贴自动上传图片与文件
Luke
帮助344人
#前言
今天学新通技术网正式启用了 tinymce 的富文本编辑器， 因文章有部分是精选的其他网站，文章中带有图片，所以需要将复制的文章中的图片进行自动化粘贴上传图片与文件，后端进行本地化，完整代码在最后！！！
#解决方法
1、配置好 toolbar 插件， 启用 past
{
toolbar: 'paste'
}
2、配置相关参数
{
image_advtab: true,
importcss_append: true,
images_upload_credentials:true,
images_upload_url: '/api/config/upload/file',
images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
powerpaste_word_import: 'merge',
powerpaste_html_import: 'merge',
powerpaste_allow_local_images: true,
paste_data_images: true,
}
3、使用 paste_postprocess 方法进行粘贴上传
paste_postprocess: (editor, data) => {
var node = data.node;
// 粘贴上传图片
var imgSrc = [];
var imgNodeObj = node.getElementsByTagName('img');
if (imgNodeObj.length > 0) {
for (img of imgNodeObj) {
img.setAttribute('src', img.getAttribute('src').replace('#pic_center', ''));
var src = img.getAttribute('src') ?? '';
if (/^(https?|http|ftp):/img.test(src)) {
imgSrc.push(src);
}
}
if (imgSrc && !$.isEmptyObject(imgSrc)) {
var formData = new FormData();
formData.append('urls', imgSrc.join("|||"));
formData.append('dirName', 'editorCover');
$.ajax({
url: '你的图片上传地址',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
async: false,
beforeSend: function (jqXHR, settings) {
layer.load(3);
},
success : function(res) {
layer.closeAll('loading');
var i;
for (i = 0; item = imgNodeObj[i]; i ) {
if (item.getAttribute('src') == res.list[i].source) {
item.removeAttribute('data-src');
item.removeAttribute('crossorigin');
item.src = res.list[i].path;
}
}
editor.save();
},
error: function(){
layer.closeAll('loading');
layer.msg('上传失败');
}
});
}
}
},4、后端进行本地化保存
我这里后端是用的PHP， 框架使用的是Laravel，所以我这里提供 PHP的后端处理方法，其他语言请自己处理本地化
PHP-laravel 本地化，要注意，图片的顺序不要乱，否者前台JS对照链接进行替换的时候，会出错，导致图的位置不正确
<?php
class upload
{
/**
* 根据 url 抓取图片本地化
*
* @Author luke.wu
*
* @return void
*/
public function fileLocalization($request)
{
$params = $request->all();
// 默认存储目录
$dirName = 'uploadList';
if (isset($params['dirName']) && $params['dirName']) {
$dirName = $params['dirName'];
}
$urls = [];
// 解析链接
if (isset($params['urls']) && $params['urls']) {
$urls = explode('|||', $params['urls']);
}
// 存储处理好的本地化链接
$files = [];
foreach ($urls as $k => $v) {
$files[$k]['path'] = '';
if (!empty($v)) {
if (strpos($v, 'http://') === 0 || strpos($v, 'https://') === 0) {
// 处理某些情况下，因为图片带的参数，导致存储出现错误，所以把 ? 后面的参数全部去掉
$hostUrlExp = explode('?', $v);
$hostUrl = current($hostUrlExp);
// 本地的路径
$path = '/' . $dirName . '/' . create_uuid() . (strtolower(strrchr($hostUrl, '.')) ?? '.jpg');
// 开始本地化存储
$copyRes = copy($hostUrl, public_path('storage') . $path);
// 存储成功
if ($copyRes) {
$files[$k]['path'] = env('UPLOAD_URL') . $path;
$files[$k]['url'] = env('UPLOAD_RUN_URL') . $path;
}
}
$files[$k]['source'] = $v;
}
}
return ['status' => 1, 'code' => '200-1', 'msg' => '上传成功', 'list' => $files, 'location' => $path, 'path' => $path, 'dir' => '访问图片的域名地址', 'url' => '访问图片的域名地址' . $path];
}
}
正确处理后-返回的结果
<?php
return array(
'status' => 1,
'code' => '200-1',
'msg' => '上传成功',
'list' => array(
0 => array(
'path' => '/storage/editorCover/931292c7b2ddc5b1f6002f49d8d6145a.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/931292c7b2ddc5b1f6002f49d8d6145a.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/6c224f4a20a4462328bd9c209622720e0cf3d778.jpg',
),
1 => array(
'path' => '/storage/editorCover/b455ac2a80c3d0e7006145afe8d7e630.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/b455ac2a80c3d0e7006145afe8d7e630.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/0824ab18972bd407f29ceabf75899e510fb3091c.jpg',
),
2 => array(
'path' => '/storage/editorCover/d2ae0b3f09fe6de7ca463ea3e1e37005.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/d2ae0b3f09fe6de7ca463ea3e1e37005.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/023b5bb5c9ea15ce081bd94bb8003af33b87b2fe.jpg',
),
3 => array(
'path' => '/storage/editorCover/87e1aee498b3f07455a708100707577f.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/87e1aee498b3f07455a708100707577f.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/d000baa1cd11728beba5b560c6fcc3cec2fd2ce3.jpg',
),
4 => array(
'path' => '/storage/editorCover/cdf3c33e827cbcb8529a7c4ad99350c2.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/cdf3c33e827cbcb8529a7c4ad99350c2.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/024f78f0f736afc3a7ef0627bd19ebc4b6451294.jpg',
),
5 => array(
'path' => '/storage/editorCover/2248ea9aef49d1f1c63b680ba269e4a2.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/2248ea9aef49d1f1c63b680ba269e4a2.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/0df431adcbef760911dda0dd20dda3cc7dd99e99.jpg',
),
6 => array(
'path' => '/storage/editorCover/895c475718af7642f2a624b00de9a005.jpg',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/895c475718af7642f2a624b00de9a005.jpg',
'source' => 'https://bkqsimg.ikafan.com/uploadx/d4628535e5dde711feb67bb4a9efce1b9d16610f.jpg',
),
),
'location' => '/editorCover/895c475718af7642f2a624b00de9a005.jpg',
'path' => '/editorCover/895c475718af7642f2a624b00de9a005.jpg',
'dir' => '/storage',
'url' => 'http://cdn-static.swvq.com/storage/editorCover/895c475718af7642f2a624b00de9a005.jpg',
);
5、前台进行图片地址的替换
这个是前端根据图片的顺序，循环的替换为本地化的图片地址
var i;
for (i = 0; item = imgNodeObj[i]; i ) {
if (item.getAttribute('src') == res.list[i].source) {
item.removeAttribute('data-src');
item.removeAttribute('crossorigin');
item.src = res.list[i].path;
}
}
editor.save();#完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/plain" id="config-editor"></script>
<script src="http://www.swvq.com/static/lib/editor/TinyMCE/tinymce_6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
var someRoot = tinymce.init({
selector: '#config-editor',
skeletonScreen: true,
width: '100%',
height: 600,
language: 'zh-Hans',
toolbar: 'code | paste',
plugins: 'preview code imagetools bdmap table kityformula-editor indent2em lineheight tpLayout importcss searchreplace autolink autosave save directionality visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
editimage_cors_hosts: ['picsum.photos'],
menubar: 'file edit view insert format tools table help',
branding: false,
tinydrive_max_image_dimension: 600,
relative_urls: false,
remove_script_host: true,
convert_urls: false,
image_advtab: true,
importcss_append: true,
images_upload_credentials: true,
images_upload_url: '/api/config/upload/file',
images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
powerpaste_word_import: 'merge',
powerpaste_html_import: 'merge',
powerpaste_allow_local_images: true,
paste_data_images: true,
paste_postprocess: (editor, data) => {
var node = data.node;
// 粘贴上传图片
var imgSrc = [];
var imgNodeObj = node.getElementsByTagName('img');
if (imgNodeObj.length > 0) {
for (img of imgNodeObj) {
img.setAttribute('src', img.getAttribute('src').replace('#pic_center', ''));
var src = img.getAttribute('src') ?? '';
if (/^(https?|http|ftp):/img.test(src)) {
imgSrc.push(src);
}
}
if (imgSrc && !$.isEmptyObject(imgSrc)) {
var formData = new FormData();
formData.append('urls', imgSrc.join("|||"));
formData.append('dirName', 'editorCover');
$.ajax({
url: '/api/config/upload/fileLocalization',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
async: false,
beforeSend: function (jqXHR, settings) {
layer.load(3);
},
success: function (res) {
layer.closeAll('loading');
var i;
for (i = 0; item = imgNodeObj[i]; i ) {
if (item.getAttribute('src') == res.list[i].source) {
item.removeAttribute('data-src');
item.removeAttribute('crossorigin');
item.src = res.list[i].path;
}
}
editor.save();
},
error: function () {
layer.closeAll('loading');
layer.msg('上传失败');
}
});
}
}
},
});
</script>
</body>
</html>这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/taneheb
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
