Simditor 富文本编辑器基本使用

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

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