Question

我正在制作一个最小的JavaScript WYSIWYG控件。

我不想使用document.execCommand，因为它不允许任意HTML，它在浏览器等方面不一致。

以下是我到目前为止最简单的工作代码：

<button data-action="strong"><strong>b</strong></button>
<button data-action="em"><em>i</em></button>
<button data-action="u"><u>u</u></button>
<p contenteditable>The quick brown fox jumps over the lazy dog.</p>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
  $( function(){
    $( 'button' ).on( 'click', function(){
      var selection = window.getSelection();                   
      var range = selection.getRangeAt( 0 );          
      var action = $( this ).attr( 'data-action' );            
      var node = document.createElement( action );
      var frag = range.extractContents();
      node.appendChild( frag );
      range.insertNode( node );

      return false;           
    });
  });
</script>

如果某些选择已包含强标记（或其他），我该如何制作它以便再次点击该按钮会删除这些标记而不是用新的强标记包装选择？

写这个问题给了我一个想法。我现在会尝试并回答我自己的问题，如果它有效 - 那么这个问题就在这里以防其他任何人反对这一点。否则，我将等待你的援助：）

编辑：很明显，如果其他人发布了一个有效的解决方案，我会接受他们的答案，而不是我的答案，如果它更好。

编辑（2）：所以我的想法没有成功。事实证明，某些东西（可能是range.insertNode）会为你神奇地平衡标签。我似乎没有足够的信息来自选择，范围或碎片，以始终知道选择是否在给定标签内。有什么想法吗？

Answer 1

编辑：这不是一个好的解决方案。除了单行简单文本之外，它完全分解了。我已经解决了，很快就会发布更好的解决方案。

想出来。

我构建了一个包含wysiwyg区域中每个文本节点的数组，以及它的父标签列表。

然后我将选择包装在一个自定义元素中，以便以后很容易删除，以免与任何现有HTML元素冲突，使用推荐的x-前缀。

然后我从该列表重建了wysiwyg元素的内容，如果所有节点都已经拥有它，则从选择中的所有节点中删除单击按钮的标记，这是大多数wywiwyg编辑器处理它的方式。

http://jsfiddle.net/x7WRZ/

<button data-action="B"><b>b</b></button>
<button data-action="I"><i>i</i></button>
<button data-action="U"><u>u</u></button>
<p contenteditable>The quick brown fox jumps over the lazy dog.</p>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script>
  $( function(){    
    var selectionWrapper = 'X-SELECTION';

    function getTextData( element ) {
      function getTextNodesIn( root ) {
        var textNodes = [];
        var parents = [];

        function getTextNodes( node ) {
          if( node.nodeType === 3 ){     
            var text = node.textContent;
            textNodes.push({
              text: text,
              parents: parents.slice( 0 )
            });
          } else {
            if( node !== root ){
              parents.push( node.tagName );
            }
            for( var i = 0, len = node.childNodes.length; i < len; ++i ){
              getTextNodes( node.childNodes[ i ] );
            }
            parents.pop();
          }
        }

        getTextNodes( element );

        return textNodes;
      }    

      return getTextNodesIn( element );   
    }

    function handleSelection( container, action ) {
      var textData = getTextData( container );
      container.innerHTML = '';

      //if every textNode in the selection has action as a parent, we want
      //to remove it from all of them.
      var selection = _( textData ).filter( function( data ){
        return _( data.parents ).contains( selectionWrapper );
      });
      var remove = _( selection ).every( function( data ) {
        return _( data.parents ).contains( action ) || data.text.trim() === ''; 
      });
      _( selection ).each( function( data ){
        if( remove ) {
          data.parents = _( data.parents ).without( action );
        } else {
          data.parents.push( action );
        }
      });

      //rebuild each text node
      _( textData ).each( function( data ){
        //no need to add empty text nodes
        if( data.text === '' ) {
          return;
        }
        //remove duplicates of the same parent tag and remove the selection wrapper
        var parents = _( data.parents ).chain().uniq().without( selectionWrapper ).value();            
        var target = container;
        _( parents ).each( function( parent ){
          var node = document.createElement( parent );
          target.appendChild( node );
          target = node;
        });
        var text = document.createTextNode( data.text );
        target.appendChild( text );
      });
    }

    $( 'button' ).on( 'click', function(){
      var action = $( this ).attr( 'data-action' );            
      var selection = window.getSelection();  

      for( var i = 0; i < selection.rangeCount; i++ ){
        var range = selection.getRangeAt( i );      
        var node = document.createElement( selectionWrapper );                    
        node.appendChild( range.extractContents() );          
        range.insertNode( node );
        handleSelection( $( 'p' )[ 0 ], action );
      }

      return false;           
    });
  });    
</script>

最小的JavaScript wysiwyg - 如果已存在，则从所选文本中删除标记

1 个答案: