Simditor是一个基于浏览器所见即所得的文本编辑器。Simditor的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。
今天在用原生PHP开发项目的时候，就选择了Simditor编辑器，非常的适合此项目。下面来给大家说说：如何快速入门使用Simditor？
Simditor使用完整教程
版本：jQuery v3.5.1、Simditor v2.3.27
1、在你的前端，也就是html页面中引用如下相关的JS和CSS；
几个js默认位置是在：simditor-2.3.27/site/assets/scripts，不需要单独去下载了。下面为了方便管理，我就把它整理移放在另一个文件夹了。
以下都是必须引入的文件。
index.php
<link rel="stylesheet" type="text/css" href="/admin/simditor/simditor.css?x61917" />
<script type="text/javascript" src="/admin/js/jquery.min.js?x61917"></script>
<script type="text/javascript" src="/admin/simditor/module.js?x61917"></script>
<script type="text/javascript" src="/admin/simditor/hotkeys.js?x61917"></script>
<script type="text/javascript" src="/admin/simditor/uploader.js?x61917"></script>
<script type="text/javascript" src="/admin/simditor/simditor.js?x61917"></script>
2、在使用Simditor的HTML页面里添加 textarea文本框 代码，例如：
index.php
<textarea id="editor" autofocus></textarea>
3、在script中初始化编辑器：
<script>
toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
'color', 'fontScale', 'ol', 'ul', 'blockquote', 'code', 'table',
'link', 'image', 'hr', 'indent', 'outdent','alignment' ,'html'];
var editor = new Simditor({
textarea : $('#editor'),
placeholder : '这里输入内容...',
pasteImage: true,
toolbarFloat:true,
toolbar : toolbar, //工具栏
defaultImage : 'simditor-1.0.5/images/image.png', //编辑器插入图片时使用的默认图片
upload : {
url : 'ImgUpload.action', //文件上传的接口地址
params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
connectionCount: 3,
leaveConfirm: '正在上传文件'
}
});
</script>
4、最后的效果如下：
相关推荐：
Simditor实现查看“HTML源代码”扩展：simditor-html
一、自定义toolbar控件
富文本编辑器顶部的toolbar控件可以自定义，在初始化Simditor时设定toolbar的值即可。
例如：
// 初始化Simditor
var editor = new Simditor({
textarea: $('#editor'),
toolbar: [
'title', // 标题
'bold', // 加粗文字
'italic', // 斜体文字
'underline', // 下划线
'strikethrough',// 删除线
'|', // 控件分隔线
'fontScale', // 字体大小
'color', // 字体颜色
'ol', // 有序列表
'ul', // 无序列表
'blockquote', // 引用
'code', // 代码块
'table', // 表格
'link', // 链接
'image', // 图片
'hr', // 分割线
'indent', // 向右缩进
'outdent', // 向左缩进
'alignment' // 水平对齐
]
});
控件都挤在一起很影响美观，toolbar支持用竖线|来分隔控件，在控件之间添加一个分隔效果。
这样可以对控件进行归类。
比如效果举例：
二、simditor其它初始化选项
不只是toolbar，simditor还支持很多其他选项。
// 初始化Simditor
var editor = new Simditor({
textarea: $('#editor'),
// 富文本框的placeholder属性
placeholder: '请尽情输入吧！',
// 顶部toolbar是否允许浮动
// 如果允许浮动，则滚动页面时，toolbar会固定在网页顶部
toolbarFloat: true,
// 浮动偏移
// 比如100，就是向下偏移100px
// 网站可能会有浮动的导航条之类的，防止冲突
toolbarFloatOffset: 100,
// 隐藏toolbar
toolbarHidden: false,
// 插入图片时的默认图路径
defaultImage: 'images/image.png',
// 允许使用tab和shift+tab进行向左/向右缩进
tabIndent: true,
// 在textarea里添加隐藏input框
// 键是input的name属性，值是value属性
// 一般是用作表单提交时默认参数使用
// 比如这个示例就会创建
// <input type="hidden" name="from" value="simditor">
// <input type="hidden" name="type" value="1">
params: {type: '1', from: 'simditor'},
// 图片按钮的功能
// upload是上传图片功能
// external是外链图片功能
imageButton: ['upload', 'external'],
// 图片上传接口设置
upload: {
// 图片上传接口路径
url: 'upload.php',
// 上传时的附加参数
params: null,
// 图片提交key
fileKey: 'file',
// 本地最大同时上传数
connectionCount: 3,
// 上传时退出的提示信息
leaveConfirm: '正在上传中，你确定要退出吗？'
},
// 允许粘贴图片时快速上传
pasteImage: true,
// 粘贴时清除html样式
cleanPaste: true,
// 允许的标签列表
allowedTags: ['br', 'span', 'a', 'img'],
// 允许的标签属性列表
allowedAttributes: {
img: ['src', 'alt'],
a: ['href', 'target'],
font: ['color'],
code: ['class']
},
// 允许的css样式列表
allowedStyles: {
span: ['color', 'font-size'],
b: ['color'],
i: ['color'],
strong: ['color'],
strike: ['color'],
u: ['color'],
p: ['margin-left', 'text-align'],
h1: ['margin-left', 'text-align'],
h2: ['margin-left', 'text-align'],
h3: ['margin-left', 'text-align'],
h4: ['margin-left', 'text-align']
},
// 插入代码支持的代码列表
codeLanguages: [
{name: 'Bash',value: 'bash'},
{name: 'C++',value: 'c++'}
],
// toolbar列表
toolbar: [
'title','bold','italic','code','image'
]
});
三、图片上传api
根据上文可以知道，Simditor初始化时设置upload参数可以让他支持自定义api上传功能。
比如upload初始化设置为：
upload: {
// 图片上传接口路径
url: 'upload.php',
// 上传时的附加参数
params: null,
// 图片提交key
fileKey: 'file',
// 本地最大同时上传数
connectionCount: 3,
// 上传时退出的提示信息
leaveConfirm: '正在上传中，你确定要退出吗？'
}
下面来使用php来写上传接口，对应文件upload.php。
接口需要返回如下json格式：
{
"success": true, // 失败了返回false
"msg": "upload failed", // success返回false时，错误信息
"file_path": "image/1.jpg" // success返回true时，图片路径
}
后端代码如下：
// 获取上传图片和文件名
$image = $_FILES['file']['name'];
$image_tmp = $_FILES['file']['tmp_name'];
// 图片保存地址
$filepath = 'image/';
$result = [];
// 将保存的图片移动到指定地址
if(move_uploaded_file($image_tmp, $filepath.$image)){
// 上传成功
$result['success'] = true;
$result['file_path'] = $filepath.$image;
echo json_encode($result);
}else{
// 上传失败
$result['success'] = false;
$result['msg'] = '上传失败';
echo json_encode($result);
}这里只是简单举例，实际使用中记得要注意其他问题，比如判断文件扩展名、生成文件保存名、最大上传大小等问题。
四、提供的方法
Simditor提供了很多常用方法。比如你实例化Simditor：
var editor = new Simditor...
则可以用以下方法对富文本编辑器进行操作：
editor.setValue('233'); // 设置正文内容
editor.getValue(); // 获取正文内容
editor.sync(); // 将正文内容和textarea标签的value属性的值进行同步，返回正文内容
editor.focus(); // 使textarea获得焦点并且触发'focus'事件
editor.blur(); // 使textarea失去焦点并且触发'blur'事件
editor.hidePopover(); // 隐藏弹出的弹出框（例如编辑图片和链接的弹出框）
editor.destroy(); // 销毁Simditor，包括所有事件和创建了的元素
五、事件监听
Simditor提供了很多监听事件，使用起来是这样的：
editor.on('valuechanged', (e, src) => {
// 执行...
});
提供了以下事件：
valuechanged // 正文内容改变时
selectionchanged // 光标选中的文本位置改变时
decorate // 粘贴和调用setValue时
undecorate // 调用getValue和sync时
pasting // 粘贴内容时
focus // textarea获得焦点时
blur // textarea失去焦点时
destroy // Simeditor被摧毁时
例如1：
editor.on 'pasting', (e, $pasteContent) ->
if $pasteContent.find("img").length > 0
return false
例如2：
如果上面事件监听不生效，喜欢原生JavaScript代码的人，推荐用以下这个：
editor.on("valuechanged",function(){
alert(editor.getValue());
//document.getElementById("editor").innerHTML = editor.getValue();
})
