simditor富文本编辑器最新最简单的使用方法
程序员文章站
2022-07-01 19:56:16
...
Simditor这个编辑器就不过多的介绍了,反正我个人感觉挺不错,界面好看并且使用起来也特别简单。
一、Simditor下载
官网链接https://simditor.tower.im/,可以直接下载zip压缩包或者通过git来下载。
二、引入文件
你下载的东西可能会非常多,但我们需要用到的有
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>
把上面文件引入之后,我们就开始创建编辑器了
三、基本使用
写html编辑器标签
<textarea id="editor" placeholder="Balabala" autofocus></textarea>
初始化编辑器js
<script>
$(function(){
var editor = new Simditor({
textarea: $('#editor'),
toolbar: [
'title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link',
'image', 'hr', '|', 'alignment'
],
placeholder:'写点什么呢......',
defaultImage:'images/image.png',//插入图片显示的默认图片
params:{
'key':'v'
},//在textarea中插入一个隐藏的输入以存储参数
pasteImage:true,//是否允许直接粘贴图片
cleanPaste:true,//自动删除粘贴内容中的所有样式
upload:{
url:'/api/api.php',//后台接收图片地址
params:null,
fileKey:'uploadFile',//后台接收图片需要
connectionCount:3,//允许同时上传图片数
leaveConfirm:'正在上传图片',//如果在上传文件时离开页面,则会显示此消息;
}
});
});
</script>
如果不出意外的话,一个simditor编辑器已经出现了。
四、simditor上传图片
我们既然选择了富文本编辑器,那么上传图片一定是必不可少的一个功能,那么我们来看看后台应该怎么写
测试使用代码
<?php
$arr=[
'success'=>true,//true或false
'msg' => 'message',
'file_path'=> '/upload/1.png'
];
echo json_encode($arr);
使用测试代码是想让整个代码先跑通,simditor对后台返回的json格式要求就是上面那样的,这有一点需要注意的是,不要使用return来返回数据要使用echo,至于为什么,这里不多解释了。
如果上面代码你跑通了,那么接收上传的图片并且保存一定是你想要的,往下看,
<?php
$image = $_FILES['uploadFile'];//对应初始化编辑器的fileKey
$path='../uploads/4.jpg';
if($image){
move_uploaded_file($image['tmp_name'], $path);
}
$arr=[
'success'=>true,
'msg' => $image,
'file_path'=> $path
];
echo json_encode($arr);
上面代码只是简单的把图片保存到了$path这个路径中了,至于上传图片重命名什么的就简单了,自己动手吧。
上一篇: Vue刷新页面的三种方式