From: Jason Woofenden Date: Tue, 2 Feb 2016 05:02:34 +0000 (-0500) Subject: make editor test basically work in firefox X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=commitdiff_plain;h=6130a51115ea0181baf6ca0f286ca5f845bbeff3 make editor test basically work in firefox --- diff --git a/.gitignore b/.gitignore index de3b8f4..21f7542 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ /parser.js /parser_no_browser_helper.js /parser_tests.js +/editor.js +/editor_tests.js diff --git a/Makefile b/Makefile index f2fef49..257fda2 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -OBJECTS= parser.js parser_tests.js parser_no_browser_helper.js +OBJECTS= parser.js parser_tests.js parser_no_browser_helper.js editor.js editor_tests.js all: $(OBJECTS) %.js: %.coffee diff --git a/editor.coffee b/editor.coffee index 5ec9434..cde553d 100644 --- a/editor.coffee +++ b/editor.coffee @@ -235,7 +235,7 @@ class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @tree = [] - @iframe = document.createElement('iframe') + @iframe = domify iframe: class: 'peach_html5_editor' @cursor = null @cursor_el = null @cursor_visible = false @@ -243,116 +243,119 @@ class PeachHTML5Editor @parser_opts = {} if opt_fragment @parser_opts.fragment = 'body' - @in_el.parentNode.appendChild @iframe - @idoc = @iframe.contentDocument - ignore_key_codes = - '18': true # alt - '20': true # capslock - '17': true # ctrl - '144': true # numlock - '16': true # shift - '91': true # windows "start" key - control_key_codes = # we react to these, but they aren't typing - '37': KEY_LEFT - '38': KEY_UP - '39': KEY_RIGHT - '40': KEY_DOWN - '35': KEY_END - '8': KEY_BACKSPACE - '46': KEY_DELETE - '13': KEY_ENTER - '27': KEY_ESCAPE - '36': KEY_HOME - '45': KEY_INSERT - '33': KEY_PAGE_UP - '34': KEY_PAGE_DOWN - '9': KEY_TAB + @iframe.onload = => + @idoc = @iframe.contentDocument - @idoc.body.onkeyup = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - #return false if control_key_codes[e.keyCode]? - @idoc.body.onkeydown = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - #return false if control_key_codes[e.keyCode]? - switch e.keyCode - when KEY_LEFT - if @cursor? - new_cursor = find_prev_cursor_position @tree, @cursor... - if new_cursor? - @move_cursor new_cursor - else - for c in @tree - new_cursor = find_next_cursor_position @tree, c, -1 + ignore_key_codes = + '18': true # alt + '20': true # capslock + '17': true # ctrl + '144': true # numlock + '16': true # shift + '91': true # windows "start" key + control_key_codes = # we react to these, but they aren't typing + '37': KEY_LEFT + '38': KEY_UP + '39': KEY_RIGHT + '40': KEY_DOWN + '35': KEY_END + '8': KEY_BACKSPACE + '46': KEY_DELETE + '13': KEY_ENTER + '27': KEY_ESCAPE + '36': KEY_HOME + '45': KEY_INSERT + '33': KEY_PAGE_UP + '34': KEY_PAGE_DOWN + '9': KEY_TAB + + @idoc.body.onkeyup = (e) => + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + #return false if control_key_codes[e.keyCode]? + @idoc.body.onkeydown = (e) => + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + #return false if control_key_codes[e.keyCode]? + switch e.keyCode + when KEY_LEFT + if @cursor? + new_cursor = find_prev_cursor_position @tree, @cursor... if new_cursor? @move_cursor new_cursor - break - return false - when KEY_UP - return false - when KEY_RIGHT - if @cursor? - new_cursor = find_next_cursor_position @tree, @cursor... - if new_cursor? - @move_cursor new_cursor - else - for c in @tree - new_cursor = find_prev_cursor_position @tree, c, -1 + else + for c in @tree + new_cursor = find_next_cursor_position @tree, c, -1 + if new_cursor? + @move_cursor new_cursor + break + return false + when KEY_UP + return false + when KEY_RIGHT + if @cursor? + new_cursor = find_next_cursor_position @tree, @cursor... if new_cursor? @move_cursor new_cursor - break - return false - when KEY_DOWN - return false - when KEY_END - return false - when KEY_BACKSPACE - return false - when KEY_DELETE - return false - when KEY_ENTER - return false - when KEY_ESCAPE - return false - when KEY_HOME - return false - when KEY_INSERT - return false - when KEY_PAGE_UP - return false - when KEY_PAGE_DOWN - return false - when KEY_TAB - return false - @idoc.body.onkeypress = (e) => - return if e.ctrlKey - return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? # handled in keydown - char = e.charCode ? e.keyCode - if char and @cursor? - char = String.fromCharCode char - if @cursor[1] is 0 - @cursor[0].text = char + @cursor[0].text - else if @cursor[1] is @cursor[0].text.length - 1 - @cursor[0].text += char - else - @cursor[0].text = - @cursor[0].text.substr(0, @cursor[1]) + - char + - @cursor[0].text.substr(@cursor[1]) - @cursor[0].el.nodeValue = @cursor[0].text - @move_cursor [@cursor[0], @cursor[1] + 1] - return false - if options.stylesheet # TODO test this - istyle = @idoc.createElement 'style' - istyle.setAttribute 'src', options.stylesheet - @idoc.head.appendChild istyle - icss = @idoc.createElement 'style' - icss.appendChild @idoc.createTextNode css - @idoc.head.appendChild icss - @load_html @in_el.value + else + for c in @tree + new_cursor = find_prev_cursor_position @tree, c, -1 + if new_cursor? + @move_cursor new_cursor + break + return false + when KEY_DOWN + return false + when KEY_END + return false + when KEY_BACKSPACE + return false + when KEY_DELETE + return false + when KEY_ENTER + return false + when KEY_ESCAPE + return false + when KEY_HOME + return false + when KEY_INSERT + return false + when KEY_PAGE_UP + return false + when KEY_PAGE_DOWN + return false + when KEY_TAB + return false + @idoc.body.onkeypress = (e) => + return if e.ctrlKey + return false if ignore_key_codes[e.keyCode]? + return false if control_key_codes[e.keyCode]? # handled in keydown + char = e.charCode ? e.keyCode + if char and @cursor? + char = String.fromCharCode char + if @cursor[1] is 0 + @cursor[0].text = char + @cursor[0].text + else if @cursor[1] is @cursor[0].text.length - 1 + @cursor[0].text += char + else + @cursor[0].text = + @cursor[0].text.substr(0, @cursor[1]) + + char + + @cursor[0].text.substr(@cursor[1]) + @cursor[0].el.nodeValue = @cursor[0].text + @move_cursor [@cursor[0], @cursor[1] + 1] + return false + if options.stylesheet # TODO test this + istyle = @idoc.createElement 'style' + istyle.setAttribute 'src', options.stylesheet + @idoc.head.appendChild istyle + icss = @idoc.createElement 'style' + icss.appendChild @idoc.createTextNode css + @idoc.head.appendChild icss + @load_html @in_el.value + + @in_el.parentNode.appendChild @iframe clear_dom: -> # FIXME add parent node, so we don't empty body and delete cursor_el while @idoc.body.childNodes.length diff --git a/editor_tests.coffee b/editor_tests.coffee index d0c71fd..7297567 100644 --- a/editor_tests.coffee +++ b/editor_tests.coffee @@ -1,4 +1,4 @@ in_el = document.getElementById 'in' button = document.getElementById 'button' button.parentNode.removeChild button -editor = peach_html5_editor in_el +window.editor = peach_html5_editor in_el diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html new file mode 100644 index 0000000..ad00fcd --- /dev/null +++ b/editor_tests_compiled.html @@ -0,0 +1,25 @@ + + + + + + html editor tester + + + +

Peach HTML5 Editor test page (partially compiled version)

+

This version of the editor test page requires that you've compiled parser.js (to speed up page load) but it does compile editor.coffee and editor_tests.coffee in the browser so you don't have to rebuild them every time you make a change.

+
+

In:

+

+
+ + + + +