最近需要富文本编辑器做一些开发，在网上搜了一些，这里只列举一些国内的。
- Ueditor，http://fex.baidu.com/ueditor/，功能强大，只是它的界面越来越不适应当下的审美了
- Neditor，https://gitee.com/notadd/neditor，整体基于Ueditor，界面更符合现在的审美。
- wangEditor，http://www.wangeditor.com/，功能比较简略。
使用哪款完全看自己，做博客类的可能Ueditor更适合，但是一些轻型的像论坛类的应用可以使用wangEditor和UMeditor，后者是Ueditor的mini版。
我在项目中试用了ueditor和wangEditor，在这里记录一下踩坑过程。
Ueditor
- 前端配置，按照教程完全可以配置好，这里简单讲一下
<form action="" method="post">
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.min.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
这样界面上就会显示一个富文本编辑器了
界面.png
至于要使用什么功能都可以去
ueditor.config.js里面配置
- 后端配置
刚开始配置后端的时候遇到了很多问题，这些问题可能你也会遇到，这里讲一下。因为会用到上传图片或文件的功能，所以需要有一个后端接口处理上传到后端的图片或文件。富文本编辑器上传图片或文件都是采用的异步上传，那么首先要配置就是要发送图片和文件的目的URL，这个配置同样在ueditor.config.js里面
serverUrl: URL + "../../../index/post/upload"这个serverUrl就是后端接口位置，+后面的内容要换成自己的后端地址，配置完这个接口后Ueditor在初始化的过程中会先向这个接口发送一个请求，请求内容为serverUrl: URL + "../../../index/post/upload?action=config"，因此需要你的后端在对应的接口处接收到这个action参数进行处理，如果action参数是config的话，就要返回一个配置的json内容，这个json内容就是Ueditor文件夹里面的config.json。
Ueditor初始化完毕后如果用户点击了上传图片的图标，用户选择完图片后js会向同样的后端接口地址发送这样的请求serverUrl: URL + "../../../index/post/upload?action=uploadimage"，这个action后面跟的内容是和config.json里面的配置有关的。
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "http://localhost/bbs/public/uploads/", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
imageActionName的内容就是action参数的内容，所以后端接收到的action如果是uploadimage的话，接口就要从$_FILES['upfile']（这个upfile的值取得是imageFieldName的值）里面取得上传的文件并保存在服务端，处理完后需要向前端返回文件信息，比如文件名，保存的url等。官方给了一个后端的demo，需要使用一个文件存储的类，如果是在thinkphp5里面的话则非常简单，tp5的File类功能完全可以做文件存储了。
public function upload(){
$action = $this->request->param('action');
switch($action){
case 'config':
$result = file_get_contents(ROOT_PATH.'public/static/js/ueditor/config.json');
break;
case 'uploadimage':
$file = $this->request->file('upfile');
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
$res = $info->getInfo();
$res['state'] = 'SUCCESS';
$res['url'] = $info->getSaveName();
$result = json_encode($res);
}
break;
default:
break;
}
return $result;
}
这里给大家一个后端的demo供参考，向前台返回的图片url地址前台会将它和config.json里面的imageUrlPrefix做一个拼接在前端显示。
以上就是Ueditor的使用了，惯例祝福，生活开心、事业如意。
网友评论