在angularjs的光标位置的内容可编辑div中插入div或自定义指令

Question

我必须在contenteditable div中插入一个自定义指令。

   /*Editor Div*/
      <div id="edBody"  contenteditable="true"></div>
   /*Insert one custom directive*/
   <a ng-click="insertType('fibtext')">Add Directive</a>

我尝试了这个：

  <input type="button" value="Insert" ng-click="addHtmlAtCaret('<dc-tags></dc-tags>')">
   /* Directive */
    asignmentApp.directive('dcTags', function() {
       return {
          restrict: 'E',
          template: 'new <b> Value </b>'
       };
    });

请帮我。 小提琴：-http: //jsfiddle.net/k2SUJ/1/

这是我尝试过的小提琴演示 。

Answer 1

为了使Angular知道添加的元素并发挥其魔力，您需要$compile该元素并将其链接到作用域。

因此，您将需要一个具有范围的控制器。 您还需要用ng-click替换onclick处理程序，还需要$compile元素：

在HTML中：

<input type="button" value="..." ng-click="addHtmlAtCaret(...)">

在JS中：

app.controller('ctrl', function ($compile, $scope) {
    $scope.addHtmlAtCaret = function (html) {
        document.getElementById('test').focus();
        ...
        var el = document.createElement("div");
        el.innerHTML = html;
        $compile(el)($scope);
        ...
    };
});

---

另请参见此简短演示 。

Answer 2

在执行粘贴之前，最好保存光标并将其还原。 在按钮的情况下，只有上面的起作用。 但是如果您使用Popover或Dialog on按钮，并且在关闭对话框后，Content Editable Div Focus将首先在AngularJS App中使用。 因此，在执行上述操作之前，请也执行此操作。 考虑这是您的内容可编辑部门，如下所示。 在ng-click和ng-keyup上，我只是保存可编辑DIV的当前光标，并且当用户打开对话框或弹出窗口或执行任何操作并调用函数addHtmlAtCaret（html）时，只需将光标重新设置到最后输入的位置，然后进行与上述gkalpak用户相同的操作。

 var saveSelection, restoreSelection; $scope.commentKeyInput = function(keyEvent,id) { // (keyEvent.target).innerHTML=''; if (keyEvent.which === 13){ //alert('I am an alert'); } else{ var divID='comment'+id; savedSelection = saveSelection(document.getElementById(divID)); // savedSelection.start++; // console.log(savedSelection.start); } } $scope.commentBoxClicked=function(event,id){ try{ var divID='comment'+id; savedSelection = saveSelection(document.getElementById(divID)); // console.log(savedSelection.start); } catch(e){ alert(e); } } if (window.getSelection && document.createRange) { saveSelection = function(containerEl) { var range = window.getSelection().getRangeAt(0); var preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(containerEl); preSelectionRange.setEnd(range.startContainer, range.startOffset); var start = preSelectionRange.toString().length; readCounter++; return { start: start, end: start + range.toString().length } }; restoreSelection = function(containerEl, savedSel) { var charIndex = 0, range = document.createRange(); range.setStart(containerEl, 0); range.collapse(true); var nodeStack = [containerEl], node, foundStart = false, stop = false; // console.log('Read Called '+readCounter+ " Node Type ="+node.nodeType); // readCounter++; while (!stop && (node = nodeStack.pop())) { if (node.nodeType == 3) { var nextCharIndex = charIndex + node.length; if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { range.setStart(node, savedSel.start - charIndex); foundStart = true; } if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { range.setEnd(node, savedSel.end - charIndex); stop = true; } charIndex = nextCharIndex; } else { var i = node.childNodes.length; while (i--) { nodeStack.push(node.childNodes[i]); } } } var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } else if (document.selection && document.body.createTextRange) { saveSelection = function(containerEl) { var selectedTextRange = document.selection.createRange(); var preSelectionTextRange = document.body.createTextRange(); preSelectionTextRange.moveToElementText(containerEl); preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange); var start = preSelectionTextRange.text.length; return { start: start, end: start + selectedTextRange.text.length } }; restoreSelection = function(containerEl, savedSel) { var textRange = document.body.createTextRange(); textRange.moveToElementText(containerEl); textRange.collapse(true); textRange.moveEnd("character", savedSel.end); textRange.moveStart("character", savedSel.start); textRange.select(); }; } $scope.addHtmlAtCaret = function (html) { if (savedSelection) { restoreSelection(document.getElementById('comment0'), savedSelection); } //document.getElementById('comment0').focus(); var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; $compile(el)($scope); var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { // IE < 9 document.selection.createRange().pasteHTML(html); } } 

 <div contenteditable ng-model="commentform.comment name="comment0" id="comment0" placeholder="Write a comment..." ng-keyup="commentKeyInput($event,0)" ng-click="commentBoxClicked($event,0)" ></div>