首先创建一个rich.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <form action="/hfback/after/imgejs" enctype="multipart/form-data" method="post"> <p>标题:</p><input type="text" name="title" style="width: 100%; height: 20px;"> <br/> <div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> //会出现一个文本域 用display:none;进行隐藏 <textarea id="text1" name="content" style="display: none;"></textarea> <button type="submit">提交</button> <script src="/static/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/static/js/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor; var editor = new E('#editor'); var $text1 = $('#text1'); editor.customConfig.onchange = function (html) { // 监控变化,同步更新到 textarea $text1.val(html) }; //绿色部分是对图片的设置,本地上传 editor.customConfig.debug = true; editor.customConfig.uploadFileName = 'image'; //上传的文件名 // 或者 var editor = new E( document.getElementById('editor') ) editor.customConfig.uploadImgServer = "/hfback/after/uploads"; // 上传图片到服务器 editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; //图片的尺寸 editor.customConfig.uploadImgMaxLength = 5; //最多上传多少 editor.customConfig.uploadImgParams = { type: 'editor' // 属性值会自动进行 encode ,此处无需 encode }; editor.create(); $text1.val(editor.txt.html()) </script> </form> </body> </html>
后台拼接地址图片设置方法
public function uploads() { // 获取表单上传文件 例如上传了001.jpg $file = request()->file('image'); // 移动到框架应用根目录/uploads/ 目录下 $info = $file->move('D:\BtSoft\WebSoft\wwwroot\tp51\public\uploads'); //在public/创建uploads,获取图片的地址 if ($info) { $url = "http://www.tp51.com/uploads/" . $info->getSaveName(); //在域名加图片的地址进行拼接 $datas = ["errno" => 0, "data" => [$url]]; return json($datas); } else { // 上传失败获取错误信息 echo $file->getError(); } }
wangEditor3富文本编辑器 进行内容的接收 并插入texts数据库
public function imgejs()
{
$data = Request::only(["title", "content"]);
dump($data);
$values = [
'title' => $data['title'],
'content' => $data['content'],
'time' => time()
];
$validate = new content; //进行验证 标题 、内容 必填 数字限制
if (!$validate->check($values)) {
$this->success(($validate->getError()), '/hfback/after/rich');
}
Db::table('texts')
->insert($values);
}
获取的数据插入数据库的时候,内容会还有html代码,在前端显示时,用模板输出的时候要进行转义。
{$date.content|raw} //在最后一行的模板中添加 |raw