wangEditor-3.1.1 后台文本编辑器(含上传图片)

匿名 (未验证) 提交于 2019-12-02 23:38:02

换了框架以后,百度编辑器用不了了,不支持PHP文件在静态文件夹中执行,查找了各种编辑器,最后决定用wangEditor-3.1.1,这个编辑器,好处就是可以自定义上传图片的控制器路径和上传的文件夹,下面是步骤:
1.HTML内容
<div class="form-group">








2.引入js文件(js文件要提前放在你想放的目录)

去githup上下载wangEditor编辑器,将release文件夹下的文件复制过来,文件夹命名为:wangEditor-3.1.1,然后在HTML中引入下面两个文件,分别是样式文件和js核心文件
<!--编辑器-->
<link rel="stylesheet" type="text/css" href="__JS__/plugins/wangEditor-3.1.1/wangEditor.css">
<script src="__JS__/plugins/wangEditor-3.1.1/wangEditor.js"></script>

这个commjs是写的公共方法,可以直接调用,需要更换项目中文件上传的路径和返回的图片文件名
<script src="__JS__/plugins/wangEditor-3.1.1/wangEditorComm.js"></script>

由于上传不了文件,直接把js文件写过来吧:

 // 编辑器公共方法2019-05-31 var E = window.wangEditor; var editor = new E('#editor-trigger'); //开启debug模式 editor.customConfig.debug = true; // 关闭粘贴内容中的样式 editor.customConfig.pasteFilterStyle = false; // 忽略粘贴内容中的图片 editor.customConfig.pasteIgnoreImg = true;  // 上传图片 editor.customConfig.uploadImgServer = "/admin/articles/uploadImg"; editor.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称 editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M //自定义上传图片事件 editor.customConfig.uploadImgHooks = {     customInsert: function (insertImg, result, editor) {         // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)         // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果         // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:         var url =result.data.src;         insertImg(url);         // result 必须是一个 JSON 格式字符串!!!否则报错     } } //设置内容 var $text1 = $('#text1') editor.customConfig.onchange = function (html) {     // 监控变化,同步更新到 textarea     $text1.val(html) } editor.create(); // 初始化 textarea 的值 $text1.val(editor.txt.html());


<?php













?>

文章来源: https://blog.csdn.net/hechenhongbo/article/details/90756951
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!