H5引入wangEditor
百度编辑器操作相对复杂，其他编辑器功能不够齐全，多次使用发现还是wangEditor编辑器简单易用，功能也比较合适。
界面演示
插件资源包内容
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/static/admin/">
<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>upload image demo</title>
<link href="./wangeditor/css/style.css" rel="stylesheet">
<style>
.editor-container{
border: 1px solid #eee;
}
.editor-toolbar{
border-bottom: 1px solid #eee;
}
.editor-text-area{
height: 400px;
}
</style>
</head>
<body>
<p>
Upload image
</p>
<div class="getbutton">
<button class="getHtml">获取内容</button>
</div>
<div class="editor-container">
<div id="editor-toolbar" class="editor-toolbar"></div>
<div id="editor-text-area" class="editor-text-area"></div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="./wangeditor/index.js"></script>
<script>
const E = window.wangEditor
// Change language
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
const editorConfig = { MENU_CONF: {} }
// 图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '{:url("Index/wangEditor")}',
timeout: 5 * 1000, // 5s
fieldName: 'custom-fileName',
// meta: { token: 'xxx', a: 100 },
metaWithUrl: true, // join params to url
headers: { Accept: 'text/x-json' },
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
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)
},
}
const editor = E.createEditor({
selector: '#editor-text-area',
html: '<p>Upload image...</p><p><br></p>', //设置默认值
config: editorConfig
})
const toolbarConfig = {}
// 取消不需要的菜单
toolbarConfig.excludeKeys = [
"insertImage",
"group-video"
]
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: toolbarConfig
})
$('.getHtml').click(function(){
console.log(editor.getHtml())
})
</script>
</body>
</html>后端上传接口-TP5
/**
* [wangEditor]
* @return [type] [msg]
*/
public function wangEditor()
{
$returnData['code'] = 1;
$returnData['msg'] = "错误操作！";
$file = request()->file('custom-fileName');
if($file){
$info = $file->validate(['ext'=>'jpg,png,gif,pdf,zip'])->move('./uploads/syssite');
if($info){
$returnData['errno'] = 0;
$returnData['data']['url'] = "/uploads/syssite/".str_replace("\\", "/", $info->getSaveName());
$returnData['data']['title'] = "图片";
}else{
$returnData['errno'] = 1;
$returnData['message'] = $file->getError();
}
}
return json($returnData);
}相关问题
从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的<table><code><blockquote>等标签进行自定义样式
不添加自定义样式，页面展示时不会显示编辑器内引用、表格等效果样式
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}