前端开发:一个简单和快速的所见即所得编辑器(simditor)

JavaScript/前端
464
0
0
2022-04-28
simditor是一个开源(MIT协议)的富文本编辑器,支持IE10+、Chrome、Firefox、Safari浏览器,只需要简单的配置就可以使用,功能精简,加载快速。

前端开发:一个简单和快速的所见即所得编辑器(simditor)

https://github.com/mycolorway/simditor/releases

在以上地址下载zip文件,你也可以使用npm和bower安装Simditor:

  • npm install simditor
  • bower install simditor

在你需要使用simditor的页面中引入以下文件

  • Simditor基于jQuery和module.js
  • hotkeys.js是用来绑定快捷键的
  • uploader.js是用来上传文件的,如果你不需要上传可以不引入

前端开发:一个简单和快速的所见即所得编辑器(simditor)

在页面中创建一个textarea元素,并设置id属性。


运行以下脚本代码,一个简单的实例就完成啦。

  • textarea属性是必须的,值可以是jQuery对象、HTML元素或者选择器

前端开发:一个简单和快速的所见即所得编辑器(simditor)

前端开发:一个简单和快速的所见即所得编辑器(simditor)

一些可选的选项:

  • placeholder simditor的占位符。使用占位符textarea默认的属性值。
  • toolbar 显示工具栏按钮
  • toolbarFloat 滚动时固定工具栏在浏览器的顶部
  • toolbarHidden 隐藏工具栏
  • defaultImage 默认图像占位符。在Simditor插入图片时使用。
  • tabIndent 使用“tab”键进行缩进
  • pasteImage 支持从剪贴板粘贴图片上传。只支持Firefox和Chrome。

更多options属性,请前往

http://simditor.tower.im/docs/doc-config.html查看详情。

官方扩展插件:

  • simditor-emoji: emoji
  • https://github.com/mycolorway/simditor-emoji
  • simditor-mention: 回答 ('@')
  • https://github.com/mycolorway/simditor-mention
  • simditor-autosave: 自动保存
  • https://github.com/mycolorway/simditor-autosave
  • simditor-mark: 标记笔
  • https://github.com/mycolorway/simditor-mark
  • simditor-html: HTML源码编辑
  • https://github.com/mycolorway/simditor-html
  • simditor-markdown: 减价编辑
  • https://github.com/mycolorway/simditor-markdown
  • simditor-checklist: 添加复选框
  • https://github.com/mycolorway/simditor-checklist

前端开发:一个简单和快速的所见即所得编辑器(simditor)

除此之外还有第三方扩展插件,当然你也可以自己扩展。

如果你有更好、使用的插件想要和我们分享,请评论告诉我,感谢您的分享。