使用kindeditor作为富文本编辑器,内容和图片的保存

使用ke作为富文本编辑器,用于论坛的时候,刚开始对于图片与内容的保存比较纠结。因为,图片在其他地方需要摘出来单独使用,

当时一直没有想到如何解决。后来,修改图片宽高的时候,对图片路径进行了处理,首先在ke上传的图片的js中对源码做了修改,

然后,获取当前页面的一个隐藏控件,然后把图片路径赋值给该控件。这样,在保存发帖内容的时候,就把图片路径同时到保存到数据库了。


另外一点,ke保存的帖子内容是包含html标签的。需要的时候,从数据库读出来的就是包含html标签的内容,图片也是一样。实际上,就是一个html代码块。

由于,前台需要显示帖子的部分信息,所以这一块处理起来感觉难以下手。因此,最简单的方式就是,在显示部分信息的时候,过滤所有html标签,只显示文字。

这样,图片在前台部分信息展示的时候也直接过滤了,这一点暂时没有想到怎么解决。

不知道广大网友对此有何高见?

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,在 `application\extra` 目录下新建一个 `config.php` 文件,添加以下配置: ```php <?php return [ 'upload_path' => '/uploads/', //上传文件保存的路径 'upload_exts' => 'gif,jpg,jpeg,png,bmp', //允许上传的文件类型 ]; ``` 2. 在 `application\index\controller` 目录下新建一个 `Upload.php` 控制器,添加以下代码: ```php <?php namespace app\index\controller; use think\Controller; use think\Request; class Upload extends Controller { public function uploadImage() { $file = request()->file('imgFile'); $info = $file->validate(['ext' => config('upload_exts')])->move(ROOT_PATH . 'public' . config('upload_path')); if ($info) { $image_url = config('upload_path') . $info->getSaveName(); return json(['error' => 0, 'url' => $image_url]); } else { return json(['error' => 1, 'message' => $file->getError()]); } } } ``` 3. 在 `application\index\view` 目录下新建一个 `upload_image.html` 文件,添加以下代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="<?php echo url('upload/uploadImage'); ?>" enctype="multipart/form-data" method="post"> <input type="file" name="imgFile"> <input type="submit" value="上传"> </form> </body> </html> ``` 4. 修改 `kindeditor` 配置文件 `public\static\kindeditor\config.js`,添加以下代码: ```javascript //上传图片配置 imageUploadJson = '<?php echo url("upload/uploadImage"); ?>'; ``` 5. 在 `public\static\kindeditor\plugins` 目录下新建一个 `image.php` 文件,添加以下代码: ```php <?php //获取上传文件保存的路径 $save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path']; //获取要上传的文件 $file = $_FILES['imgFile']; //上传文件 if (move_uploaded_file($file['tmp_name'], $save_path . $file['name'])) { $image_url = $_POST['base_url'] . $_POST['save_path'] . $file['name']; //返回上传结果 echo json_encode(['error' => 0, 'url' => $image_url]); } else { echo json_encode(['error' => 1, 'message' => '上传失败']); } ``` 6. 修改 `kindeditor` 的 `php` 上传文件处理程序 `public\static\kindeditor\php\upload_json.php`,添加以下代码: ```php //获取要保存的文件路径和文件名 $save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path']; $file_name = uniqid() . strrchr($_FILES['imgFile']['name'], '.'); //上传文件 if (move_uploaded_file($_FILES['imgFile']['tmp_name'], $save_path . $file_name)) { $image_url = $_POST['base_url'] . $_POST['save_path'] . $file_name; //返回上传结果 echo json_encode(['error' => 0, 'url' => $image_url]); } else { echo json_encode(['error' => 1, 'message' => '上传失败']); } ``` 7. 在浏览器中访问 `http://localhost/index/upload_image.html`,上传一张图片测试。如果上传成功,会返回图片的 URL 地址。在 `kindeditor` 中也可以正常上传图片了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值