开源项目 开源 Tower 的编辑器 Simditor

zchar · 2014年03月25日 · 最后由 Liu-XiaoDao 回复于 2020年03月16日 · 26382 次阅读
本帖已被管理员设置为精华贴

项目地址: https://github.com/mycolorway/simditor DEMO 地址:http://mycolorway.github.io/simditor/demo.html

又一个编辑器?

从 2012 年第一版 Tower 上线以来,我们就在寻找一款最为合适的编辑器以供 Tower 的用户使用,我们最早使用 http://xing.github.io/wysihtml5/ 作为 Tower 的编辑器,在前期 wysihtml5 很好的满足了我们的核心需求 -- 非常方便的添加附件,无论是直接粘贴剪切板里的内容还是拖动上传,wysihtml5 都很容易实现,不过随着 Tower 功能的增加,当我们引入 @ 成员、Markdown 功能、代码识别、自动短链等一系列功能以后,我们发现第三方开源编辑器的局限性也逐渐暴露出来,这些局限性让我们在很多用户体验和工程复杂性的岔路口上选择向工程复杂性妥协,于是我们思考了一下(实际上是纠结了很久),作为一款在线生产力工具,让用户能极其舒畅的生产内容是它的核心品质之一,所以我们决定自己开发一款编辑器,这就是 Simditor 产生的原因。

经过不断地改进,我们已经在最近使用 simditor 替换了 Tower 里的默认编辑器,包括创建讨论、发表回复以及创建在线文档的编辑器,现在都使用自产的 Simditor 了。所以如果说这个开源编辑器和其它开源编辑器相比有什么不同,我觉得最大不同在于这款编辑器不是一个业余爱好的产物,而是每天被几万人使用的真实产品,我们会非常谨慎的评估究竟什么功能是实际用户最为需要的,而不会因为交互很酷炫,就把功能增加进编辑器里,导致代码膨胀,造成麻烦的后果。

Simditor 认证功能

以下内容来自 Tower 里使用 Simditor 创建的一篇文档《在线笔记格式指南》,直接贴图了:

功能扩展

除了上述格式指南中的功能,在 Tower 里的 Simditor 还具 @通知 这样的高级功能,这种类似的和本身产品的数据关联比较紧的插件,可以通过扩展 https://github.com/mycolorway/simple-module 这个 Module 来实现,我们也会在稍后以 @通知 功能为参考放出写插件的方法。

有任何问题,欢迎 Email 给我们反馈:tower@mycolorway。当然,更加欢迎程序猿参与贡献,特别是各位 Tower 用户,不必等待,直接修改。

有没有在线 example 看一下呢?

表格编辑功能很赞!

赞!表格的功能好强大!

赞。。

不支持 markdown 是因为用户用的少么?

#19 楼 @hardywu 现在 Simditor 不支持是因为 html to markdown 的转换不太稳定,如果只有单向的转换不如把 markdown 做成一个单独的组件。从产品层面来讲,简书的方式也许是更好的,要么选择 markdown 编辑器,要么选择富文本编辑器。

Tower 大赞 现在给当时大学里的学生组织就是用 Tower 做项目管理

#21 楼 @zj0713001 剑哥哥~

PS : Tower 的管理确实很还用

#19 楼 @hardywu tower 有选项 可以选择 markdown 文档的

#23 楼 @mcdong 我看到的是支持 markdown 代码。。。我上面问的是支持 Markdown 的输入和预览的功能,类似 http://toopay.github.io/bootstrap-markdown/ 这样。

生成的 tag 很干净,不错啊

#23 楼 @mcdong 看到了,原来创建文档可以选择 markdown 啊。不错

Tower 的编辑器很赞,最近也有部分改进。

:thumbsup:

cool,简洁干净

赞!欢迎来 www.sf.gg 上分享,我们帮忙推荐!

赞!!

github 里面的 demo 中的 simditor-master/externals/font-awesome/css/font-awesome.css 这个不存在

#37 楼 @yakczh 你是在本地测试的么?simditor 是通过 git submodule 来引用其他库的,你在本地需要先执行:

git submodule init
git submodule update

然后就可以直接打开那个 demo.html 文件啦。 更过关于 submodule 的使用,可以看下这里

如果你需要测试下图片上传功能,我们用 express 做了个简单的上传接口,你可以使用 Grunt 来安装相关依赖,然后用 grunt server 来启动。

之后我去更新下 Readme 里面的 How to use

公司也是用 Tower 的,所以我每天都会用到,一般任务就是纯文本,外加 Paste 上去的 HTML

文档会用 Markdown 多一点

感觉这个编辑器不好用,不大智能,具体原因,我现在一时忘记了,有几次惹我很生气,等重现时,再来回贴

不过赞开源

#41 楼 @MaFai 我们这周才把 tower 里的编辑器替换成 simditor 的,现在试试看呢?

喜欢!

demo 中上传本地图片失败,图片格式为 png

#44 楼 @jsvisa 因为那是在 github page 上的一个静态页面,没有后台的上传接口呀。 我们把 tower.im 里的编辑器都换成了 simditor,你可以用 tower 看看呢。

demo 好简洁,喜欢!

47 楼 已删除

好赞好赞

用过一段时间 tower, 真心不错,对 editor 印象很深,适用的就是最好的,👍

如何实现上传图片呢?现在看到的似乎是手动输入地址啊

支持👍 希望能快点出文档。

#53 楼 @z2323721 悄悄告诉你,文档你可以先看下这里,我们正在努力更新中...

#54 楼 @kshift 好的,今天看到文档已经更新了,多谢你们的努力。

在我的项目里试用了一下编辑器,编辑出来的代码是完全 Clean 的,这正是我想要的。 在操作上,图片上传的功能不是很友好,插入的图片不存在的话的话修改起来不是很舒服。 但是在安装的过程中 font-awesome 在我的 rails 项目里总是无法找到字体,不过这个问题只是我自己项目的问题,于是借地问一下。 我已经在 config 里面加上 fonts 文件夹,rails 已经能成功请求到 font 的路径 /font-awesome.ttl, 然后在 font-awesome.scss 里面已经把 src 改成了 font-url,在 chrome 的请求中都能看到正确请求到这个文件,最后居然编辑器的按钮全是方框(字体加载失败)。这很是让我费解。 最后我用了//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css 这个 CDN, 然后就好了,汗。

@bydmm 你的情况应该是路径问题,看看你的 css 路径相对目录是否是这样子的?

├── fonts │   ├── FontAwesome.otf │   ├── fontawesome-webfont.eot │   ├── fontawesome-webfont.svg │   ├── fontawesome-webfont.ttf │   └── fontawesome-webfont.woff ├── styles │   ├── app.css │   ├── font-awesome.css │   └── simditor.css

对不起,我自己更新一下这条帖子。

Simditor 开源一个月以后,已经有了很多更新,包括一个比较有彩程品位的产品站:http://simditor.tower.im/,完整且完善的文档,两个 Tower 已经使用的插件(emoji 和 markdown),再加上某个热心小童鞋的 video 插件,它的进展速度比我预想的要好很多,这真心是开发者可以选择的一个在线编辑器,所以再做一次推荐。

@zchar 请问 simditor 支持剪裁吗?工具栏上的按钮只想保留“插入图片”

#59 楼 @steve 支持的,menu 菜单可以自己配置,文档里有介绍。

#59 楼 @steve 是指的图片裁剪么?暂时还没有这个功能,因为这个使用场景比较少见,Simditor 的核心代码里应该不会添加这个功能。不过欢迎开发第三方插件来投递~ 编写插件:http://simditor.tower.im/tours/tour-plugin.html 插件列表:http://simditor.tower.im/extension.html

@kshift 不好意思,没表达清楚。其实是想问是否能把设置标题、加粗文字、插入表格等功能去掉,只保留插入图片链接这个功能。

#62 楼 @steve 是可以的,文档 -> http://simditor.tower.im/docs/doc-config.html toolbar,只保留 image 就可以

是什么 License?

@wxmcan 如何进行附件上传?可否支招一下?而不是图片上传。 谢谢!

#64 楼 @flowerwrong MIT -> https://github.com/mycolorway/simditor/blob/master/LICENSE

#65 楼 @chenjieb Tower 的附件上传是通过自己写的一个插件来实现的,但由于我不知道的原因(可能和 Tower 耦合度过高?)没有开源出来,不过你可以参考图片上传的方式自己写一个(http://simditor.tower.im/tours/tour-plugin.html)。 // 或者你直接去 github 上给作者提 issue 吧 :P

#66 楼 @kshift 原来是没有开源,弄的我重复看了好几遍文档,最后都没有发现才来 ruby china 找答案了。

如何插入一段 html 代码呢?

#69 楼 @jun1st 你是指编辑器的源码模式么?没有的

#70 楼 @kshift 要在文章中嵌入一段视频播放的 html 代码,:) 后来自己写了个 button 解决了

#70 楼 @kshift 想要编辑器源码模式~

问下,为什么我在上传图片的报“上传出错了”是什么意思呢

#47 楼 @cqpx 这个 gem 在一直更新中吗?可以正常上传本地图片吗?

会发布官方版的 gem 吗?

#77 楼 @chairy11 应该不会出官方的 gem,建议用 bower 来管理。

#76 楼 @chairy11 抱歉,最近没用 simditor 了

请问,如果我在一个页面使用多个 textarea,也就是需要多个富文本编辑器,这时候会显示很奇怪的现象,怎么办?

@kshift 碰到个问题,要用 bootstrap 的 responsive iframe,需要添加下列代码,

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

使用了 html 插件,但是不能保存,一保存外面的 div wrapper 就没有了,看了下源码,无处下手,请教下怎么改?

ps: 已经自定义了 allowAttributes 和 allowTags

@huacnlee 举报一下楼上这个 ID,在 simditor github repo 的起码 10 个 PR 里也是这样恶意留言

chairy11 回复

请问你的问题解决了吗?

ShumenZr 回复

解决是解决了,但那都多少年前的事情了,我已经很久没写 ruby 了。 随便翻了翻,找到下面代码,希望对你有用吧,如果没用,我也找不到其它了。很久不接触了。

  • html erb <%= f.input :brief_on_listpage, label:'显示在列表页的简介', hint: "请把字数控制在200字以内", input_html: { rows:"4", class:'rich_text_editor' } %> <%= f.input :background, label:'项目背景', input_html:{ class:'rich_text_editor' } %> <%= f.input :solution, label:'项目方案', input_html:{ class:'rich_text_editor' } %> <%= f.input :result, label:'项目成果', input_html:{ class:'rich_text_editor' } %>

-coffee

# 富文本编辑器初始化 - 通用设置
 rich_text_editor = (dom) ->
   new Simditor(
     textarea: $(dom)
     upload: {
       url: '/admin/photos',
       params: null,
       fileKey: 'upload_img',
       connectionCount: 5,
       leaveConfirm: '正在上传文件,如果离开上传会自动取消'
     }
     defaultImage: '/images/default-placeholder.jpg'
     pasteImage: true
     imageButton: 'upload'
     toolbar:  ['title','bold','color', 'italic', 'underline', '|', 'ul', 'ol', '|',  'image', 'table', 'link', '|','blockquote', 'hr', '|', 'indent', 'outdent', 'source']
   )

 # 富文本编辑器初始化 - 执行
 $(".rich_text_editor").each (index, dom) ->
   rich_text_editor(dom)



 # 页面设置 - ajax
 # 定义「编辑」按钮与「取消」按钮通用的功能: 显示或关闭当前的编辑表格
 toggle_config_item_status = (obj) ->
   config_item = obj.parents('.config_item')
   config_item.find('.config_item_value').toggle()
   config_item.find('form').toggle()
   # 富文本编辑器显示有问题,可能要重新初始化
   config_item.find('.simditor-toolbar').css("width", "100%")

chairy11 回复

谢谢,非常高兴能收到您的回复。

kshift 回复

请问,simditor,现在有上传视频的插件了吗?

不再维护了啊? 还打算用用看~

1c7 回复

还在维护,之前一段时间考虑用别的方案实现编辑器,不过最近决定还是继续用 Simditor。

kshift 回复

恩~

tower 文档编辑器的版本对比的功能,包括文档版本回退,用的是什么方案实现的?不会是 git 吧

要是有文字背景色功能就好了。

请问 simditor 完成编辑后如何按原样显示

怎么上传附件啊

需要 登录 后方可回复, 如果你还没有账号请 注册新账号