JavaScript jquery.qeditor - 简化的所见即所得编辑器

huacnlee · 2013年08月12日 · 最后由 joezhang 回复于 2014年10月10日 · 25 次阅读

这是我最近完成的一个简单的所见即所得编辑器。

为什么会有这个

目前市面上的那些有下面的问题:

  • 太复杂,绝大多数功能我不需要;
  • 没有自动的格式清除功能,用户从别的地方粘贴过来提交后内容乱七八糟;
  • 预览与实际结果无法很好的统一;
  • 调用太复杂,文件众多,安装麻烦(比如 KissyEditor 就是典型);
  • 换行普遍是插入 BR 而不是 P...;
  • 编辑出来的内容总是会有一堆乱七八糟的 style 属性;

jquery.qeditor 有什么

  • 简单简洁的 UI,简单的调用接口
  • 使用 Font-awsome 作为 Toolbar 的按钮图标,使用简单,并且支持 Retina Display;
  • 沉浸式的全屏界面,让你在全屏界面找到真实预览的感觉;
  • 粘贴的时候自动清理多余不必要的 HTML 标签与属性,使得你正文的排版不受用户拷贝代码的影响;
  • 换行使用 p,而不是 br;
  • 实现编辑器内容与一个 textarea 同步,让你实现后端提交能够简单实现,无需调用 JS 获得编辑器的内容。

https://github.com/huacnlee/jquery.qeditor

共收到 57 条回复

nice!赞一个。。

小bug,插入图片时,按取消还是会生成<img src="false"> Chrome 27.0.1453.110

#2楼 @miclle 恩,漏掉了,哈哈

还有link <a href="false">false</a>

这是什么情况。。 demo第一次进去是OK的,后来进去就这样了 ?

#5楼 @kai1248 刚才在调整 JS 的链接,好像直接连库里面会有问题

希望有个查看源代码按键

准备入手。

#7楼 @Peter 查看源代码功能是给对功能不自信的编辑器用的,普通用户根本不懂 html 所以不需要这个功能,反而是应该在易用性上面下功夫,比如上传图片

图片不支持上传?

@huacnlee 不支持全选? Ctrl + A

#11楼 @tumayun 什么系统,浏览器?

@huacnlee Ubuntu 12.04

@huacnlee 只能右键 Select All

#15楼 @tumayun 你在网站上面全选是什么快捷键就是什么快捷键,这是浏览器功能

@huacnlee 奥 应该是我装的插件的问题

太棒了,楼主完美的满足了我的需求,攒一个

让我一下子想到了writings.io

js才100+行,简洁,赞👍

document.execCommand 果然强大

@huacnlee 全屏的时候菜单太靠边了,不好点击! chrome

非常喜欢! 问题:能否提供3个不同大小的字体?一个专门用于变换字体大小的按钮,点击即更换大小,一共三种模式的大小,第三次按时字体恢复原大小。

#23楼 @Levan 接下来会增加 H1-H6 的功能,应该能满足你的需求

这个必须赞一个!

支持一下。能不能提供上传图片附件的接口?

#27楼 @imlcl 正在实现,应该很快能搞定

@huacnlee 正在阅读精巧的源码, 想请教一下你在编写过程中参考的 API 文档是哪里的呢? 例如 我找到了Rich-Text Editing in Mozilla 来参考 document.execCommand, 可是 defaultParagraphSeparator 参数 的设置, 我怎么也找不到 - -||

#29楼 @wppurking defaultParagraphSeparator 是 StackOverflow 上面找到的

图片输入url需要做合法效验吗??

#31楼 @small_fish__ 没必要,用户发现插入错误,会删除的

感谢楼主,正缺这个东西,看到市面上的编辑器太复杂了.我开始还在犹豫要不要跟豆瓣一样,直接文本编辑, 看了你这个, 很简洁. 能不能增加个发视频的呢,跟豆瓣小组的发视频一样. 很简洁.

用来下,编辑器上面的引号是用来干嘛的,我点击下怎么删除不了了. 还有在github的demo上,点击图片icon, 怎么不能上床图片呢?

#34楼 @puake 自己用 jQuery hack 一下,找到 .qeditor_toolbar 新增一个按钮,自己实现

#36楼 @huacnlee https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js bootstrap-wysiwyg这个不好麽,自定义bar比较方便,不过这个只能绑定div,提交表单要自己写js,请问如何能够直接绑定textarea? 老大把这个改改吧- -

#36楼 @huacnlee 是不是绑定textarea就必须生成frame?

#38楼 @mingyuan0715 你看看我那个的执行效果就知道了,没有 iframe

#39楼 @huacnlee 不知道为什么这个作者不实现可以绑定textarea,有什么别的原因么?issue里有好几个人提这个意见。作者都推荐直接写js提交。

#40楼 @mingyuan0715 这个得你自己解决了

代码和引用没法取消啊?

@huacnlee

#42楼 @otinn 恩,这个会尽快处理一下

太赞了。。。超出意料。。。Nice

楼主,把论坛里的编辑器换了吧

#46楼 @xds2000 markdown挺好用的 #47楼 @kamiiyu -1

demo里边打开,没有输入的时候,光标默认停在B下边,但是在边框上边

NB 绝对要顶,不知道适配Bootstrap样式支持怎么样?

不过还是有很多可以完善的,比如B或I的那些都没用明显的标志显示是否开启。

自己的个人blog已经使用这个编辑器了,但是就缺一个图片上传服务器功能,要是能实现多好啊! @huacnlee

#52楼 @changming 图片上传可能每个人的实现都不同,所以放着没做

@huacnlee 好像IE8也不支持是吧

@huacnlee 请教一下,我用以下语句引用jquery.qeditor来编辑:content,但是表单提交后:content内容不更新是什么原因? 另外还有个小疑问,rows: "18"也不起作用(: content原有几行就显示几行),是什么原因? 谢谢!

<%= form_for(@project) do |f| %>
  <%= f.text_area :content, id: "post_body", rows: "18", name: "body", class: "textarea", placeholder:"body"%>
  <%= f.submit t(:update), class: "btn btn-large btn-success" %>
<% end %>

#55楼 @joezhang http://huacnlee.com/jquery.qeditor 这个页面的 Submit 动作就是一个标准的 Form 提交,可以看一下。 rows: 18 无法支持,你可以尝试用 CSS 控制高度

@huacnlee 谢谢你的提示,问题都解决了。成功应用到项目中了。

58楼 已删除
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册