<link href="/wangeditor/style.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
}
#editor—wrapper {
border: 1px solid #ccc;
/* width: 50%; */
/* float: left; */
height: 900px;
box-sizing: border-box; /* 包括边框和内边距在宽度内 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 700px; }
#editor-content-view {
/* float: left; */
/* width: 50%; */
height: 900px;
background-color: #f5f5f5; /* 背景色为浅灰色 */
border: 1px solid #ccc;
border-radius: 5px; /* 边角圆润度为5px */
box-sizing: border-box; /* 包括边框和内边距在宽度内 */
/* 当内容超出这个高度时,显示垂直滚动条 */
overflow-y: auto;
}
.styled-div {
background-color: #f5f5f5; /* 浅灰色背景 */
border: 1px solid #ccc; /* 灰色边框 */
border-radius: 5px; /* 圆角 */
padding: 10px; /* 内边距 */
margin-top: 20px; /* 上外边距 */
width: 100%; /* 宽度为100% */
max-width: 600px; /* 最大宽度为600px */
}
.styled-div textarea {
width: 100%; /* 宽度为100% */
height: 100px; /* 高度为100px */
outline: none; /* 无轮廓 */
border: none; /* 无边框 */
resize: none; /* 禁止调整大小 */
background-color: transparent; /* 透明背景 */
font-family: Arial, sans-serif; /* 字体 */
font-size: 16px; /* 字体大小 */
color: #333; /* 字体颜色 */
padding: 5px; /* 内边距 */
}
</style>
</head>
<body>
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
<!-- 页面显示 -->
<h1>实时在线预览</h1>
<div id="editor-content-view" class="editor-content-view"></div>
<!-- 服务器保存样式 -->
<h1>实时代码产出预览</h1>
<div class="styled-div">
<textarea id="editor-content-textarea" readonly></textarea>
</div>
<script src="/wangeditor/index.js"></script>
<script>
const E = window.wangEditor;
// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN';
E.i18nChangeLanguage(LANG);
// 创建编辑器实例
const editor = E.createEditor({
selector: '#editor-container',
html: '<p>Ctrl +s 进行保存</p><p>插入图片请注意换行</p><p>单张图片大小最高可为10M</p>',
config: {
placeholder: 'Type here...',
MENU_CONF: {
uploadImage: {
server: 'http://localhost/uploadimage',
fieldName: 'first',
// 设置最大图片尺寸为10M
maxFileSize: 10 * 1024 * 1024,
// 5M 以下插入 base64
// base64LimitSize: 5 * 1024 * 1024 ,
onBeforeUpload(file) {
console.log('onBeforeUpload', file)
return file // will upload this file
// return false // prevent upload
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
alert(err.message)
console.error('onError', file, err, res)
},
}
},
onChange(editor) {
const html = editor.getHtml();
document.getElementById('editor-content-view').innerHTML = html;
document.getElementById('editor-content-textarea').value = html;
// console.log(html);
}
}
});
// 创建工具栏实例
const toolbar = E.createToolbar({
editor,
selector: '#toolbar-container',
config: {}
});
</script>
</body>
上述代码为前端代码
下述代码为服务端代码
路由请自己配置,并修改JS中的server
js中的filedName,与服务端获取文件对象名称一致
public function uploadImage()
{
// 获取上传文件对象
$file = request()->file('first');
// 检查是否有文件上传
if (empty($file)) {
return Response::create([
"errno" => 1,
"message" => 'No file uploaded'
], 'json', 400);
}
// 获取文件名
$fileName = $file->getInfo('name');
// 指定保存路径(确保目录存在并且有写入权限)
$savePath = '/play/images/defult/' . $fileName;
$info = $file->move(ROOT_PATH .'/public/play/images/defult/',$fileName,false);
if (!$info) {
// 上传失败获取错误信息
return Response::create([
"errno" => 1,
"message" => $file->getError()
], 'json', 400);
} else {
// 上传成功 获取上传文件信息
$filePath = $savePath; // 使用之前定义的保存路径
return Response::create([
"errno" => 0,
"data" => [
"url" => $filePath, // 图片 src ,必须
"alt" => "Image Description", // 图片描述文字,非必须,可以根据需要进行修改
"href" => $filePath // 图片的链接,必须,可以根据需要进行修改
]
], 'json', 200);
}
}