huacnlee / jquery.qeditor Goto Github PK

View Code? Open in Web Editor NEW

259.0 20.0 68.0 316 KB

This is a simple WYSIWYG editor with jQuery.

Ruby 4.13% CSS 36.52% CoffeeScript 59.35%

jquery.qeditor's Introduction

jquery.qeditor

This is a simple WYSIWYG editor with jQuery.

中文介绍请点这里

Featrues

Simple UI, Simple Use;
Use font-awsome as toolbar icon;
Remove complex html tag, attributes on paste, this can make you web page clean;
Less code;
Use <p> not <br> on press Enter, This can help you make a neat layout;
PlaceHolder for WYSIWYG editor;
FullScreen;

Changelogs

You can see all of the release notes in here: Release notes

Browser support

Safari
Chrome
Firefox
IE (No test), maybe 8+

Demo

You can try the Demo app.

Usage

<textarea id="post_body"></textarea>
<script type="text/javascript">
$("#post_body").qeditor({});
</script>

How to add custom toolbar icon

// Custom a toolbar icon
var toolbar = $("#post_body").parent().find(".qeditor_toolbar");
var link = $("<a href='#'><span class='icon-smile'></span></a>");
link.click(function(){
  alert("Put you custom toolbar event in here.");
  return false;
});
toolbar.append(link);

Build

$ bundle install
$ rake watch # or use "rake build" to release

License

Apache V2 : http://choosealicense.com/licenses/apache

jquery.qeditor's People

Contributors

Stargazers

Watchers

jquery.qeditor's Issues

取消图片输入会刷新页面

点选输入链接或者图链的时候如果选择取消是刷新当前的页面.

PS, 这个是 font-awesome 3 的 class 名对吧, font-awesome 4 的命名改了, 当然, 如果谁有需要自己修改也不难,

最大化后的最大化按钮容易被右侧滚动条遮住

试了下 chrome 和 firefox 都这样,github 的最大化功能就把按钮放在不是那么靠最右的地方,很喜欢这个编辑器 :)

支持markdown吗？

如何做才能支持markdown？

heading无效，有朋友遇到吗？

编辑的时候，设置h1、h3这些效果都能出来
但是提交保存后，查了数据库里保存的记录仍然是<p>

环境：ruby 1.9.3，rails 3.2.13
template: erb
输出时<%= simple_format body %>

$("#post_body").val("string")赋值操作后前台无法显示，再调用val()有“string”返回

前台编辑器无法显示val()赋值的内容，同时试过innerHtml等等，都无法显示，不知何故？

输入blockquote之后，回车之后都是blockquote标签，无法退出和删除

输入引用之后，点击回车，是不是应该退回到<p>标签呢？发现qeditor还是<blockquote>标签，而且没有办法删掉。

XSS in jQuery qeditor

Hi,

The editor is vulnerable to an XSS. The editor allows users to insert link and if instead of normal link, I input JavaScript URI

javascript:alert%28location%29

then it works. The attacker can execute arbitrary code of his choice. Please fix this issue. Thanks

換行問題

第一行的換行不會出現 p 但第二行出現了

关于editor里的placeholder

这段代码里直接给editor设置上placeholder属性不可以么？为什么还要模拟个placeholder的div在里边呢？是为了兼容IE8这样的不支持placeholder属性的浏览器吗？

      # add place holder
      placeholder.text(obj.attr("placeholder"))
      editor.attr("placeholder",obj.attr("placeholder"))
      editor.append(placeholder)
      editor.focusin ->
        QEditor.checkSectionState(editor)
        $(this).find(".qeditor_placeholder").remove()
      editor.blur ->
        t = $(this)
        QEditor.checkSectionState(editor)
        if t.html().length == 0 or t.html() == "<br>" or t.html() == "<p></p>" 
          $(this).html('<div class="qeditor_placeholder">' + $(this).attr("placeholder") + '</div>' )

May use a better way to wrap jQuery

Coffee-script supports syntax like this:

do ($=jQuery)->
    $.fn.qeditor = (options) ->
        obj = $(this)
        # Do something...

Or you can just put assignment upon the codes and coffee will automatically add anonymous function wrap.

$ = jQuery
$.fn.qeditor = (options)->
    obj = $(this)
    # Do something...