rangy

问题 I am making use of a contenteditable div in combination with the rangy Javascript library to insert HTML at the cursor position. End of the day the contents of the div commonly looks like: <div contenteditable="true"> "Hello " <button contenteditable="false" data-id="147">@John Smith</button> " " </div> Users get suggested upon pressing '@' and get subsequently inserted as a button when selected (ala Google Plus). I also insert a   after this button. The button gets removed in Chrome/Safari

问题 I have been noticing this warning and error message in my console after updating Chrome to 36.0.1985.125. Warning: 'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach). Error: Discontiguous selection is not supported. Can be seen: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html Other javascript/jquery plugins (wysihtml5, rangy) have also been affected, any solutions? 回答1: I'm still trying to decide what to do about this. See this Rangy

问题 I have been noticing this warning and error message in my console after updating Chrome to 36.0.1985.125. Warning: 'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach). Error: Discontiguous selection is not supported. Can be seen: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html Other javascript/jquery plugins (wysihtml5, rangy) have also been affected, any solutions? 回答1: I'm still trying to decide what to do about this. See this Rangy

问题 I'm setting a font size for a selection using the CssClassApplier in Rangy: .font16 {font-size: 16px;} .font17 {font-size: 17px;} .font18 {font-size: 18px;} var font16Applier = rangy.createCssClassApplier("font16"); function applyfont16() { font16Applier.applyToSelection(); } Now if someone presses a "+" to bump the font size I'd like to be able to read the class name in the span tag for the selection and if it's, say, font16, change it to font17. But I'm not seeing any way in Rangy to read a

问题 It's a followup question of this. I've serialized the selection of text in an iframe and want to restore it but it gives me an error, "Uncaught Error: deserializeRange: checksums of serialized range root node (XXXXX) and target root node (XXXXX) do not match" var iframe = $("iframe")[0]; var selection = rangy.getSelection(iframe); var serializeSelection = rangy.serializeSelection(selection); alert(serializeSelection); rangy.deserializeSelection(serializeSelection); Demo: http://jsfiddle.net

问题 I have the following html: <p>Morbi quis augue vitae quam <a href="#">pharetra| varius</a> at at| urna.</p> The selection is marked with | characters. Also a screenshot of the selection: I can extend this selection to contain the whole 'a' element with the following code snippet (using Rangy library http://code.google.com/p/rangy/): $('body').on('mouseup', '[contenteditable]', function() { var block = this, sel = rangy.getSelection(), range = sel.getRangeAt(0); if (sel.anchorNode.parentNode !

问题 I am trying to implement textAngular into my Angular.js project that is packaged using browserify . I installed rangy and textAngular via npm . They are included like this: global.rangy = require('rangy'); require('angular-sanitize'); require('textangular'); When compiling the package with browserify via gulp , no errors are shown. However, as soon as I click on a button in the toolbar of the editor, I get the following error: TypeError: g.rangy.saveSelection is not a function at Scope.m

问题 I am trying bootstrap-wysihtml5-rails , I am using twitter bootstrap 2 but when I get this result as in the image, and the error: Discontiguous selection is not supported. I tried to window['rangy'].initialized = false; like this: <script type="text/javascript"> $(document).ready(function(){ window['rangy'].initialized = false; $('.wysihtml5').each(function(i, elem) { $(elem).wysihtml5(); }); }) </script> But I still get the same error, I could live with it, but it seems that it breaks the

问题 I have a jsfiddle here - http://jsfiddle.net/88em6qq9/ - where I'm trying to add <h1> tags around a selection of the entire line: "Here is some content and here too" Selecting the entire line and releasing the mouse button goes into the handler but rounding off the start and end end points with setStartBefore() and setEndAfter() gets me to different start and end containers, so the surround doesn't work. If I put "Here is some content" in its own <span> - see http://jsfiddle.net/88em6qq9/1/ -

问题 I have a contenteditable div which contains typical wysiwyg editor html (bold, anchors, lists). I need to determine if the current cursor is, onKeyDown, at the start and at the end of the div. The reason for this is, based on the cursor position, and the key pressed, I might want to merge this div with the previous div on a backspace, or create a new following div on enter. I've been fiddling around with ranges, but when you're working with html inside the element, things get pretty