Simditor是一个非常不错的web轻量级编辑器,设置简单,功能较为齐全,重点是样式相对较为好看 ^_^
引入文件
- css
<link rel="stylesheet" href="plugins/simditor/css/app.css">
<link rel="stylesheet" href="plugins/simditor/css/mobile.css">
<link rel="stylesheet" href="plugins/simditor/css/simditor.css">
- js
<script src="plugins/simditor/js/module.js"></script>
<script src="plugins/simditor/js/uploader.js"></script>
<script src="plugins/simditor/js/hotkeys.js"></script>
<script src="plugins/simditor/js/simditor.js"></script>
基本实例化
- html
<textarea name="comment" id="editor"></textarea>
- js
var editor = new Simditor({
toolbar: [
'title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link',
'image', 'hr', '|', 'alignment'
],
textarea: '#editor',
placeholder: '写点什么...',
defaultImage: '/static/home/images/logo.png',
imageButton: ['upload'],
upload: {
url: '/article/upload',
params: {_token: token},
fileKey: 'file',
leaveConfirm: '正在上传文件..',
connectionCount: 3
}
});
常用方法
- 设置值:
editor.getValue() - 获取值:
editor.setValue(value) - 获取焦点:
editor.focus() - 失去焦点:
editor.blur()
常用参数
- 编辑器实例化textarea节点,可以是jqueyr选择器也可以是jquery对象:
textarea - 图片上传方式按钮:
imageButton - 上传图片相关参数(object):
upload - 上传地址:
upload.url - 上传附加参数(object):
upload.params - 上传的
name值:fileKey: 'file'在服务端接收的键(以PHP为例):$_FILE['file']
注意点
- 上传文件时,必须返回一个指定格式的
json, 不然报错
echo json_encode([
'success' => true,
'msg' => '图片上传错误信息',
'file_path' => '/upload/2018_10_11/1.jpg'
]);
