Simditor 富文本编辑器基本使用

官方文档: https://simditor.tower.im/docs/doc-usage.html

Simditor是一个非常不错的web轻量级编辑器,设置简单,功能较为齐全,重点是样式相对较为好看 ^_^

引入文件

<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">

<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>

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\'
]);