how to wrap text in angularjs and save the position -
i wrap text span tag , save position. know how js dont know how angularjs
here have done:
http://jsfiddle.net/ymeal06j/1/
this function gives me position of text in div
function getselectionposition() { var range = window.getselection().getrangeat(0); var preselectionrange = range.clonerange(); preselectionrange.selectnodecontents(document.getelementbyid("code")); preselectionrange.setend(range.startcontainer, range.startoffset); var start = preselectionrange.tostring().length; homecoming { start: start, end: start + range.tostring().length } }; i take start , end positions , insert them attribute in span tag
after save marked positions , load later, have function select text , can wrap (i hope there improve solution)
function setselection(savedsel) { var charindex = 0, range = document.createrange(); range.setstart(document.getelementbyid("code"), 0); range.collapse(true); var nodestack = [containerel], node, foundstart = false, stop = false; 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 = node.childnodes.length; while (i--) { nodestack.push(node.childnodes[i]); } } } var sel = window.getselection(); sel.removeallranges(); sel.addrange(range); }
you can utilize same code illustrated above , set within of angularjs controller.
refer my plunker code; simple angularjs version of jsfiddle code.
for example, suppose snippet of index.html looks this:
<body ng-controller="mainctrl"> <div id="code">this <b>some text</b> bla bla bla</div> <br /> <input type="button" value="mark!" ng-click="marktext()" /> <input type="button" value="remove marks!" ng-click="removemarks()" /> </body> then illustration angularjs controller, mainctrl, this:
app.controller('mainctrl', function($scope) { var getselectionposition = function () { var range = window.getselection().getrangeat(0); var preselectionrange = range.clonerange(); preselectionrange.selectnodecontents(document.getelementbyid("code")); preselectionrange.setend(range.startcontainer, range.startoffset); var start = preselectionrange.tostring().length; homecoming { start: start, end: start + range.tostring().length } } $scope.marktext = function() { var currposition = getselectionposition(); var selection = window.getselection().getrangeat(0); var selectedtext = selection.extractcontents(); var span = document.createelement("span"); span.classname = "mark"; span.setattribute("posstart", currposition.start); span.setattribute("posend", currposition.end); span.appendchild(selectedtext); selection.insertnode(span); }; $scope.removemarks = function() { $(".mark").each(function () { $(this).contents().unwrap(); }); }; }); notice mainctrl angularjs controller body. ng-click on buttons reference marktext , removemarks functions in controller's scope. logic in functions same referenced in question (and jsfiddle).
none of js code changed other moving functions within of controller. again, check out plunker above see actual code working.
angularjs
No comments:
Post a Comment