TypeScript Editor.addVisual方法代码示例

//.........这里部分代码省略.........
      rng.setEnd(body.firstChild, 0);
      selection.setRng(rng);
    }
  }

  // Insert node maker where we will insert the new HTML and get it's parent
  if (!selection.isCollapsed()) {
    // Fix for #2595 seems that delete removes one extra character on
    // WebKit for some odd reason if you double click select a word
    editor.selection.setRng(RangeNormalizer.normalize(editor.selection.getRng()));
    editor.getDoc().execCommand('Delete', false, null);
    trimNbspAfterDeleteAndPaddValue();
  }

  parentNode = selection.getNode();

  // Parse the fragment within the context of the parent node
  const parserArgs: any = { context: parentNode.nodeName.toLowerCase(), data: details.data, insert: true };
  fragment = parser.parse(value, parserArgs);

  // Custom handling of lists
  if (details.paste === true && InsertList.isListFragment(editor.schema, fragment) && InsertList.isParentBlockLi(dom, parentNode)) {
    rng = InsertList.insertAtCaret(serializer, dom, editor.selection.getRng(), fragment);
    editor.selection.setRng(rng);
    editor.fire('SetContent', args);
    return;
  }

  markFragmentElements(fragment);

  // Move the caret to a more suitable location
  node = fragment.lastChild;
  if (node.attr('id') === 'mce_marker') {
    marker = node;

    for (node = node.prev; node; node = node.walk(true)) {
      if (node.type === 3 || !dom.isBlock(node.name)) {
        if (editor.schema.isValidChild(node.parent.name, 'span')) {
          node.parent.insert(marker, node, node.name === 'br');
        }
        break;
      }
    }
  }

  editor._selectionOverrides.showBlockCaretContainer(parentNode);

  // If parser says valid we can insert the contents into that parent
  if (!parserArgs.invalid) {
    value = serializer.serialize(fragment);
    validInsertion(editor, value, parentNode);
  } else {
    // If the fragment was invalid within that context then we need
    // to parse and process the parent it's inserted into

    // Insert bookmark node and get the parent
    selection.setContent(bookmarkHtml);
    parentNode = selection.getNode();
    rootNode = editor.getBody();

    // Opera will return the document node when selection is in root
    if (parentNode.nodeType === 9) {
      parentNode = node = rootNode;
    } else {
      node = parentNode;
    }

    // Find the ancestor just before the root element
    while (node !== rootNode) {
      parentNode = node;
      node = node.parentNode;
    }

    // Get the outer/inner HTML depending on if we are in the root and parser and serialize that
    value = parentNode === rootNode ? rootNode.innerHTML : dom.getOuterHTML(parentNode);
    value = serializer.serialize(
      parser.parse(
        // Need to replace by using a function since $ in the contents would otherwise be a problem
        value.replace(/<span (id="mce_marker"|id=mce_marker).+?<\/span>/i, function () {
          return serializer.serialize(fragment);
        })
      )
    );

    // Set the inner/outer HTML depending on if we are in the root or not
    if (parentNode === rootNode) {
      dom.setHTML(rootNode, value);
    } else {
      dom.setOuterHTML(parentNode, value);
    }
  }

  reduceInlineTextElements();
  moveSelectionToMarker(dom.get('mce_marker'));
  umarkFragmentElements(editor.getBody());
  trimBrsFromTableCell(editor.dom, editor.selection.getStart());

  editor.fire('SetContent', args);
  editor.addVisual();
};

//.........这里部分代码省略.........
      rng.setEnd(body.firstChild, 0);
      selection.setRng(rng);
    }
  }

  // Insert node maker where we will insert the new HTML and get it's parent
  if (!selection.isCollapsed()) {
    // Fix for #2595 seems that delete removes one extra character on
    // WebKit for some odd reason if you double click select a word
    editor.selection.setRng(RangeNormalizer.normalize(editor.selection.getRng()));
    editor.getDoc().execCommand('Delete', false, null);
    value = trimNbspAfterDeleteAndPadValue(editor.selection.getRng(), value);
  }

  parentNode = selection.getNode();

  // Parse the fragment within the context of the parent node
  const parserArgs: any = { context: parentNode.nodeName.toLowerCase(), data: details.data, insert: true };
  fragment = parser.parse(value, parserArgs);

  // Custom handling of lists
  if (details.paste === true && InsertList.isListFragment(editor.schema, fragment) && InsertList.isParentBlockLi(dom, parentNode)) {
    rng = InsertList.insertAtCaret(serializer, dom, editor.selection.getRng(), fragment);
    editor.selection.setRng(rng);
    editor.fire('SetContent', args);
    return;
  }

  markFragmentElements(fragment);

  // Move the caret to a more suitable location
  node = fragment.lastChild;
  if (node.attr('id') === 'mce_marker') {
    marker = node;

    for (node = node.prev; node; node = node.walk(true)) {
      if (node.type === 3 || !dom.isBlock(node.name)) {
        if (editor.schema.isValidChild(node.parent.name, 'span')) {
          node.parent.insert(marker, node, node.name === 'br');
        }
        break;
      }
    }
  }

  editor._selectionOverrides.showBlockCaretContainer(parentNode);

  // If parser says valid we can insert the contents into that parent
  if (!parserArgs.invalid) {
    value = serializer.serialize(fragment);
    validInsertion(editor, value, parentNode);
  } else {
    // If the fragment was invalid within that context then we need
    // to parse and process the parent it's inserted into

    // Insert bookmark node and get the parent
    selectionSetContent(editor, bookmarkHtml);
    parentNode = selection.getNode();
    rootNode = editor.getBody();

    // Opera will return the document node when selection is in root
    if (parentNode.nodeType === 9) {
      parentNode = node = rootNode;
    } else {
      node = parentNode;
    }

    // Find the ancestor just before the root element
    while (node !== rootNode) {
      parentNode = node;
      node = node.parentNode;
    }

    // Get the outer/inner HTML depending on if we are in the root and parser and serialize that
    value = parentNode === rootNode ? rootNode.innerHTML : dom.getOuterHTML(parentNode);
    value = serializer.serialize(
      parser.parse(
        // Need to replace by using a function since $ in the contents would otherwise be a problem
        value.replace(/<span (id="mce_marker"|id=mce_marker).+?<\/span>/i, function () {
          return serializer.serialize(fragment);
        })
      )
    );

    // Set the inner/outer HTML depending on if we are in the root or not
    if (parentNode === rootNode) {
      dom.setHTML(rootNode, value);
    } else {
      dom.setOuterHTML(parentNode, value);
    }
  }

  reduceInlineTextElements(editor, merge);
  moveSelectionToMarker(editor, dom.get('mce_marker'));
  umarkFragmentElements(editor.getBody());
  trimBrsFromTableCell(editor.dom, editor.selection.getStart());

  editor.fire('SetContent', args);
  editor.addVisual();
};

 editor.on('SetContent', function () {
   editor.addVisual(editor.getBody());
 });

//.........这里部分代码省略.........
    },

    'mceInsertContent' (command, ui, value) {
      InsertContent.insertAtCaret(editor, value);
    },

    'mceInsertRawHTML' (command, ui, value) {
      selection.setContent('tiny_mce_marker');
      const content = editor.getContent() as string;
      editor.setContent(content.replace(/tiny_mce_marker/g, () => value));
    },

    'mceToggleFormat' (command, ui, value) {
      toggleFormat(value);
    },

    'mceSetContent' (command, ui, value) {
      editor.setContent(value);
    },

    'Indent,Outdent' (command) {
      IndentOutdent.handle(editor, command);
    },

    'mceRepaint' () {
    },

    'InsertHorizontalRule' () {
      editor.execCommand('mceInsertContent', false, '<hr />');
    },

    'mceToggleVisualAid' () {
      editor.hasVisual = !editor.hasVisual;
      editor.addVisual();
    },

    'mceReplaceContent' (command, ui, value) {
      editor.execCommand('mceInsertContent', false, value.replace(/\{\$selection\}/g, selection.getContent({ format: 'text' })));
    },

    'mceInsertLink' (command, ui, value) {
      let anchor;

      if (typeof value === 'string') {
        value = { href: value };
      }

      anchor = dom.getParent(selection.getNode(), 'a');

      // Spaces are never valid in URLs and it's a very common mistake for people to make so we fix it here.
      value.href = value.href.replace(' ', '%20');

      // Remove existing links if there could be child links or that the href isn't specified
      if (!anchor || !value.href) {
        formatter.remove('link');
      }

      // Apply new link to selection
      if (value.href) {
        formatter.apply('link', value, anchor);
      }
    },

    'selectAll' () {
      const editingHost = dom.getParent(selection.getStart(), NodeType.isContentEditableTrue);
      if (editingHost) {

//.........这里部分代码省略.........
        onmousemove (e) {
          const target = e.target;
          let x, y;

          if (target.tagName.toUpperCase() === 'A') {
            x = parseInt(target.getAttribute('data-mce-x'), 10);
            y = parseInt(target.getAttribute('data-mce-y'), 10);

            if (this.isRtl() || this.parent().rel === 'tl-tr') {
              x = 9 - x;
            }

            if (x !== this.lastX || y !== this.lastY) {
              selectGrid(editor, x, y, e.control);

              this.lastX = x;
              this.lastY = y;
            }
          }
        },

        onclick (e) {
          const self = this;

          if (e.target.tagName.toUpperCase() === 'A') {
            e.preventDefault();
            e.stopPropagation();
            self.parent().cancel();

            editor.undoManager.transact(function () {
              InsertTable.insert(editor, self.lastX + 1, self.lastY + 1);
            });

            editor.addVisual();
          }
        }
      }
    ]
  };

  function cmd(command) {
    return function () {
      editor.execCommand(command);
    };
  }

  const tableProperties = {
    text: 'Table properties',
    context: 'table',
    onPostRender: pushTable,
    onclick: cmd('mceTableProps')
  };

  const deleteTable = {
    text: 'Delete table',
    context: 'table',
    onPostRender: pushTable,
    cmd: 'mceTableDelete'
  };

  const row = {
    text: 'Row',
    context: 'table',
    menu: [
      { text: 'Insert row before', onclick: cmd('mceTableInsertRowBefore'), onPostRender: pushCell },
      { text: 'Insert row after', onclick: cmd('mceTableInsertRowAfter'), onPostRender: pushCell },