Simditor 富文本编辑器

所属分类:输入-丰富的输入

 204962  486  查看评论 (50)
分享到微信朋友圈
X
Simditor 富文本编辑器 ie兼容10

更新时间:2017-6-20 10:46:36

更新说明:Simditor版本更新到2.3.5


Simditor 是团队协作工具 Tower 使用的富文本编辑器。

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

    功能精简,加载快速

    输出格式化的标准 HTML

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

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

第一步:下载并引用

在这里下载并解压最新版的 Simditor 文件,然后在页面中引入这些文件:

<link rel="stylesheet" type="text/css" href="[style path]/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js">
</script><script type="text/javascript" src="[script path]/uploader.js">
</script><script type="text/javascript" src="[script path]/simditor.js"></script>

其中,

Simditor基于 jQuery 开发,jquery.js 是必需的;

font-awesome.css 是一个图片字体 icon 库,Simditor 基于它来定义工具栏的按钮样式。为了让 icon 能够正常显示,需要将 font 文件(fontawesome-webfont.xxx)放到正确的路径里:../fonts/(如果把 font-awsome.css 放在 styles 文件夹,那么就应该把 font 文件放在跟 styles 同级的 fonts 文件夹)。另外,如果想自定义工具栏按钮的样式就可以不必引用 font-awesome.css;

module.js 是彩程内部使用的 CoffeeScript 组件抽象类,Simditor 基于这个类开发;

uploader.js 是一个与 UI 无关的上传逻辑,如果你的项目不需要上传附件,那么可以不引用这个文件。

如果觉得需要引用的脚本文件太多,可以用 simditor-all.js(里面包含了module.js uploader.js 和 simditor.js)替换:

<link rel="stylesheet" type="text/css" href="[style path]/font-awesome.css" /> 
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" /> 
<script type="text/javascript" src="[script path]/jquery-2.1.0.js">
</script> <script type="text/javascript" src="[script path]/simditor-all.js"></script>

第二步,初始化配置

在使用 Simditor 的 HTML 页面里应该有一个对应的 textarea 文本框,例如:

<textarea id="editor" placeholder="这里输入内容" autofocus></textarea>

我们需要在这个页面的脚本里初始化 Simditor:

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

textarea 是初始化 Simditor 的必需选项,可以接受 jQuery Object、HTML Element 或者 Selector String。另外,Simditor 还支持这些可选 option:

placeholder(默认值:'')编辑器的 placeholder,如果为空 Simditor 会取 textarea 的 placeholder 属性;

toolbar (默认值:true)是否显示工具栏按钮;

toolbarFloat (默认值:true)是否让工具栏按钮在页面滚动的过程中始终可见;

toolbarHidden (默认值:false)是否隐藏工具栏,隐藏后 toolbarFloat 会失效;

defaultImage(默认值:'images/image.png')编辑器插入混排图片时使用的默认图片;

tabIndent(默认值:true)是否在编辑器中使用 tab 键来缩进;

params(默认值:{})键值对,在编辑器中增加 hidden 字段(input:hidden),通常用于生成 form 表单的默认参数;

upload(默认值:false)false 或者键值对,编辑器上传本地图片的配置,常用的属性有 url 和 params;

pasteImage(默认值:false)是否允许粘贴上传图片,依赖 upload 选项,仅支持 Firefox 和 Chrome 浏览器。

更详细的配置说明可以参考 Simditor 的配置文档。配置完成之后刷新页面,Simditor 应该就可以正确加载了。

最后,自定义样式和交互

每个项目都有不同的设计风格,大多数时候我们需要修改 Simditor 的样式,让它的样式跟项目的风格相符。

simditor.css 是通过 Sass 自动生成的代码,所以推荐大家修改 simditor.scss,然后再重新生成css代码。

.editor-style 选择符下面的样式,是 Simditor 输出 HTML 的中文排版样式,大家可以根据自己项目的情况进行调整。另外,如果不想使用 font-awesome.css 来实现工具栏按钮的 icon,可以将 font-awesome.css 去掉,然后增加 .toolbar-item-[button name] 选择符来自定义按钮样式。

相关插件-丰富的输入

Javascript模拟键盘事件

Javascript模拟键盘事件 可对应键盘每一个键
  丰富的输入
 32915  319

vue健康问卷调查(原创)

vue实现移动端问卷调查,健康自测等等
  丰富的输入
 29320  339

简洁的前端用户登陆注册界面

简洁的前端用户登陆注册界面,提供5种风格样式
  丰富的输入
 37923  302

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 52970  432

讨论这个项目(50)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    创悦渠道-镇名 0
    2024/3/19 23:37:39
    没有全屏编辑器按钮? 回复
    iamatree 0
    2019/11/11 16:27:04
    为什么只显示一个文本框,没有别的东西啊?
    回复
    - about° 0
    2019/6/10 17:35:26
    这个有上传视频的功能吗 回复
    流浪 0
    2019/3/26 16:55:41
    后台编辑完后前台展示时把标签都展示出来了,怎么在前台展示时不出现特殊标签 回复
    流浪 0
    2019/3/26 16:55:07
    后台编辑完后前台展示时把标签样式都展示出来了 回复
    0
    2019/1/8 16:36:57
    font 字体没法精确设置,只有超大字体,大字体,正常字体,小字体,超小字体可选? 回复
    北悸安凉. 0
    2018/11/13 11:54:43
    怎么获取值?
        areyouOk0
        2018/11/13 13:14:07
        $("#editor").val()
    回复
    转角,爱已逝 0
    2018/7/7 17:48:28
    有没有大神告诉我怎么取值啊?
    还有能不能只取不带标签和样式的纯文本啊 回复
    -FaIr 0
    2018/7/3 16:30:34
    我就想问问 文本 怎么居中... 这么常见的需求都没有得配置吗 回复
    小时候 0
    2018/5/23 10:40:25
    粘贴的时候会跳到页头是怎么回事?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复