Skip to content

Instantly share code, notes, and snippets.

@zhangyuan

zhangyuan/editor.js.coffee

Created November 10, 2012 11:26
Show Gist options
  • Save zhangyuan/4050814 to your computer and use it in GitHub Desktop.
Save zhangyuan/4050814 to your computer and use it in GitHub Desktop.
Download ZIP
A pretty simple rich text editor sample.
Raw
editor.js.coffee
window.Editor =
create : (text_area_id) ->
$("#" + text_area_id).hide()
editor_id = "editor_" + text_area_id
iframe_html = "<iframe id= " + editor_id + " style='width: 100%; height: 500px;'>
<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title></title>
<body>
</body>
</html>
</iframe>
"
$("#" + text_area_id).after(iframe_html)
img_button = editor_id + "_img"
toolbar = "
<div>
<button type='button' id='" + img_button + "'>IMG</button>
</div>
"
$("#" + text_area_id).after(toolbar)
ifr = $("#" + editor_id)[0]
editor = ifr.contentDocument || ifr.contentWindow.document
editor.designMode = "on"
editor.open()
editor.close()
$('#' + img_button).click ->
if editor.activeElement != this
editor.body.focus()
src = prompt "IMG", ""
src = $.trim(src || "")
if src.length > 0
window.Editor.add_image(editor, src)
return editor
add_image : (editor, img_src) ->
editor.execCommand('insertimage', false, img_src)
get_content : (editor) ->
editor.body.innerHTML
set_content : (editor, content) ->
editor.body.innerHTML = content
# Usage:
# $(document).ready(function(){
# editor = window.Editor.create("content");
# content = $("#content").html();
# window.Editor.set_content(editor, content);
# $("#submit_post").click(function(){
# document.getElementById("content").value = window.Editor.get_content(editor);
# });
# });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment