Simditor编辑器

一、描述

网站网址：https://simditor.tower.im/

GitHub：https://github.com/mycolorway/simditor

学习网址：https://iobaka.com/blog/113.html

网站描述：一个基于浏览器所见即所得的文本编辑器

Simditor 是Tower开源的一个基于浏览器所见即所得的文本编辑器，它的理念是保持简单，避免过度的功能。

相比传统的编辑器，它的特点是：

1、功能精简，加载快速

2、输出格式化的标准 HTML

3、每一个功能都有非常优秀的使用体验

4、兼容的浏览器：IE10+、Chrome、Firefox、Safari。

二、开始使用

1、CSS

2、JS

3、在使用Simditor的HTML页面里添加textarea文本框

4、浏览器显示效果如下（默认情况）

var editor = new Simditor({ textarea: $('#editor') });

图1

5、浏览器显示效果如下（自定义工具栏的情况，带文字颜色）

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

});

图2

6、浏览器显示效果如下（自定义工具栏的情况，上传图片、视频、音频、附件）

三、常用方法

设置值：editor.getValue()

获取值：editor.setValue(value)

获取焦点：editor.focus()

失去焦点：editor.blur()

四、一些可选的选项

placeholder（默认的）simditor预留位置。使用默认的文本占位符属性值。

toolbar（默认值：true）-显示工具栏按钮

toolbarFloat（默认值：true）固定在浏览器顶部工具栏滚动时。

toolbarHidden（默认：假）-隐藏工具栏。

defaultImage（默认：“图像/图像，PNG的）-默认图像占位符。使用时插入图片Simditor。

tabIndent（默认值：true）使用“Tab”键进行缩进。

params（默认：{ }）插入一个隐藏的输入文本存储参数（键值对）。

upload（默认：假）接受虚假或键-值对。上传图片的额外的选项。例如“URL”、“params”

pasteImage（默认：假）支持上传图像从剪贴板粘贴。用Firefox和Chrome只支持。

五、注意

simditor 是基于 JQuery 和 module.js

hotkeys.js 用于绑定热键

uploader.js 是上传文件相关。你不需要导入此文件如果你不想上传功能。

六、出现问题

如果工具栏按钮出现如下样式（图3），则只需去掉html头部中的 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 即可

图3