Simditor 富文本编辑器基本使用
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\'
]);
版权声明:本文为liaohui5原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。