使用wangEditor问题解决-TP6
文本解析问题
读取的HTML文本必须是wangEditor生成的，如果内部插入视频，读取时应去除换行符。
$filestr = file_get_contents("../template/OWESBS/components/introduce.html");
$ediHtml = str_replace(array("\n","\r"),"",$filestr);使用tp6向模板解析时，注意HTML转义。
// 创建编辑器1
const editor = createEditor({
html: '{$ediHtml | raw}', // 从 editor.getHtml() 获取的 html 内容
selector: '#editor-container-1',
mode: 'default',
config: editorConfig,
});修改富文本时，图片或视频无法显示。
原因是，富文本编辑框内，资源地址的斜杠“\”无法解析，但网页内浏览是正常的。
修改时读取富文本，把“\”转为“/”。
$ediHtml = str_replace("\\", "/", $ediHtml);完整代码
PHP
public function update()
{
// 读取文件
$filestr = file_get_contents("../template/OWESBS/components/introduce.html");
if ($filestr) {
// 去除空格
$ediHtml = str_replace(array("\n","\r"),"",$filestr);
// 更换资源路径的斜杠
$ediHtml = str_replace("\\", "/", $ediHtml);
} else {
$ediHtml = '读取失败！';
}
return view('update',[
'ediHtml' => $ediHtml,
]);
}HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>介绍-修改</title>
<!-- 最新版JQuery -->
<!-- <script type="text/javascript" src="/bootstrap-3.0/js/jquery-3.6.0.js"></script> -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 最新的 layui 核心文件 -->
<!-- <script type="text/javascript" src="/layui-2.6.13/layui.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="/layui-2.6.13/css/layui.css" /> -->
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
<!-- 自定义文件 -->
<script type="text/javascript" src="/other/admin/util.js"></script>
<!-- wangEditor -->
<!-- <script type="text/javascript" src="/wangEditor-5.1.1/index.js"></script>
<link rel="stylesheet" type="text/css" href="/wangEditor-5.1.1/style.css" /> -->
<script type="text/javascript" src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" />
<script>
// CDN 引入 css 和 js
const { createEditor, createToolbar, IEditorConfig, IDomEditor } = window.wangEditor;
// IEditorConfig.placeholder = '请输入内容...'
// 编辑器配置
const editorConfig = { MENU_CONF: {} };
editorConfig.placeholder = '请输入内容'
editorConfig.onChange = (editor) => {
// 当编辑器选区、内容变化时，即触发
// console.log('content', editor.children)
// console.log('html', editor.getHtml())
}
// 上传图片的配置
editorConfig.MENU_CONF['uploadImage'] = {
// 服务端地址
server: '/admin/upload/image',
// form-data fieldName ，默认值 'wangeditor-uploaded-image'
// fieldName: 'your-custom-name',
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 10 * 1024 * 1024, // 1M
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 10,
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 上传之前触发
onBeforeUpload(file) {
// file 选中的文件，格式如 { key: file }
return file
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress) {
// progress 是 0-100 的数字
console.log('progress', progress)
},
// 单个文件上传成功之后
onSuccess(file, res) {
console.log(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) {
console.log(`${file.name} 上传失败`, res)
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
console.log(`${file.name} 上传出错`, err, res)
},
};
// 上传视频的配置
editorConfig.MENU_CONF['uploadVideo'] = {
server: '/admin/upload/video',
// form-data fieldName ，默认值 'wangeditor-uploaded-video'
// fieldName: 'your-custom-name',
// 单个文件的最大体积限制，默认为 10M
maxFileSize: 50 * 1024 * 1024, // 5M
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 上传之前触发
onBeforeUpload(file) {
// file 选中的文件，格式如 { key: file }
return file
// 可以 return
// 1. return file 或者 new 一个 file ，接下来将上传
// 2. return false ，不上传这个 file
},
// 上传进度的回调函数
onProgress(progress) {
// progress 是 0-100 的数字
console.log('progress', progress)
},
// 单个文件上传成功之后
onSuccess(file, res) {
console.log(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) {
console.log(`${file.name} 上传失败`, res)
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
console.log(`${file.name} 上传出错`, err, res)
},
};
// 工具栏配置
const toolbarConfig = {}
</script>
</head>
<body>
<div class="layui-container">
<div id="toolbar-container-1"></div>
<div id="editor-container-1" style="height:80vh; "></div>
<button type="button" id="editor" class="layui-btn">提交</button>
</div>
<script type="text/javascript">
// 创建编辑器1
const editor = createEditor({
html: '<h1><span style="color: rgb(191, 191, 191);">介绍</span></h1><hr/><p><img src="/upload/img/20220624/50f11d95ceae4c54bb806097adcb5402.webp" alt="" data-href="" style=""/></p><p><br></p><div data-w-e-type="video" data-w-e-is-void><video controls="true" width="auto" height="auto"><source src="/upload/video/20220624/ff594c8ade97392812163a2fee75496c.mp4" type="video/mp4"/></video></div><p><br></p><p><br></p>', // 从 editor.getHtml() 获取的 html 内容
selector: '#editor-container-1',
mode: 'default',
config: editorConfig,
});
/**
* $('w-e-textarea-1').innerHTML = '';
editor.setHtml('<h1><span style="color: rgb(191, 191, 191);">介绍</span></h1><hr/><p><img src="/upload/img/20220624/50f11d95ceae4c54bb806097adcb5402.webp" alt="" data-href="" style=""/></p><p><br></p><div data-w-e-type="video" data-w-e-is-void><video controls="true" width="auto" height="auto"><source src="/upload/video/20220624/ff594c8ade97392812163a2fee75496c.mp4" type="video/mp4"/></video></div><p><br></p><p><br></p>')
* */
// 创建工具栏1
const toolbar1 = createToolbar({
editor: editor,
selector: '#toolbar-container-1',
config: toolbarConfig,
mode: 'default'
});
// console.log( 'editor',editor.setHtml );
$('#editor').on('click', function () {
const html = editor.getHtml();
console.log(html);
console.log(typeof html);
myAjax('post', '/admin/introduce/updateSubmit', {
html,
}).then((e) => {
console.log('then', e);
layui.use('layer',function(){
layer.msg(e.msg);
});
}).catch((e) => {
console.log('catch', e);
});
})
</script>
</body>
</html>
