bergie / hallo

Simple rich text editor (contentEditable) for jQuery UI
http://hallojs.org/
MIT License
2.43k stars 318 forks source link

wrapped text-align cause incorrect toolbar display and inhibits changes #197

Open git-j opened 11 years ago

git-j commented 11 years ago

this issue is possibly more related to webkit:

<div id="container" contenteditable="true">
    <p style="text-align:left"><span style="text-align:left">test</span></p>
</div>
$('#container').hallo();

now click on 'test' and use the alignment buttons to switch to right and center alignment.

first part of the issue: even with the text aligned as center/right, the toolbarbutton still displays left alignment

second part of the issue: it is not possible to return back to left align formatting, because the button is disabled when highlighted and (webkit) ignores the execCommand: http://jsfiddle.net/DreE7/

any ideas how to handle this $user_pasted data?

git-j commented 11 years ago

this snippet resolved the issue for now but introduces other problems like a defect undo-buffer

    execute: (command, value) ->
      if ( command.indexOf('justify') == 0 )
        # when <p style="text-align:left"><span style="text-align:left">test</span></p>
        # is in the content, after aligning the content to the right, it is no longer
        # possible to align it left, as execCommand only changes the closest p/div
        # this implementation uses the current cursor position and removes all alignment
        # related style attributes from the content before executing the command
        # this action breaks the default undo
        #@storeContentPosition()
        #selection = jQuery(@selection_marker)
        sel = window.getSelection()
        range = sel.getRangeAt()
        selection = jQuery(range.startContainer)
        while ( selection.length )
          if ( selection.attr('contenteditable') == 'true' )
            break
          style_attr = selection.attr('style')
          if ( typeof style_attr != 'undefined' )
            style_attr = style_attr.replace(/text-align:[^;]*/,'')
            selection.attr('style',style_attr)
          selection = selection.parent()
      if document.execCommand command, false, value
        @element.trigger "change"