contenteditable

问题 I have a contentEditable div where I want to insert HTML tags (a simple span element). Is there a cross browser solution that allows me to insert those tags over my div selection or cursor position. If something else is selected on the page (not in the div), I want to append the tag to the end of the div. Thanks 回答1: Here is a kickstart // get the selection range (or cursor position) var range = window.getSelection().getRangeAt(0); // create a span var newElement = document.createElement(

问题 I have contenteditable div. After some actions contenteditable is re-rendered. Before re-rendering of the div I store range data to object like this: this.rangeData = { anchorNodeKey: null, anchorOffset: null, focusNodeKey: null, focusOffset: null, isCollapsed: null, }; I store keys of nodes instead of anchorNode . After re-rendering of the div I get nodes by this key and use them for creating range and restore selection like this: const range = document.createRange(); const anchorNode = this

问题 Closed. This question needs debugging details. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 3 months ago . Improve this question I have the following script that makes an HTML page editable document.body.contentEditable = 'true'; document.designMode='on'; I am wanting to only allow my users to edit sections with a class of "edit". Is this possible? 回答1: YOu can try to find all the elements with the class

问题 In a contenteditable element, when execCommand is called with command insertHTML, if selection is inside a node command unwraps the div tag around the inserted html segment. Sample HTML Code block is as follows: <div id="editable" contenteditable="true"> <div>Some text</div> <div>Yet another</div> <div>and other</div> </div> <input id="insert" type="button" value="Insert Segment"> and let javascript handling insertion be as follows $('#insert').on('mousedown', function (e) { //that is to save

问题 I am using Spectrum as a jquery plugin for the color picker to use it in the contenteditable divs. In chrome and firefox its working perfectly. But in Internet explorer its just showing the color palettes but when I select nothing is changed. However, if I exectute execCommand directly in this way it is working: $('#btn-color_font').click(function() { document.execCommand('foreColor', false, "#ff0000"); }); What am I doing wrong? Please help me how to use it in IE too. Thank you. jsfiddle

问题 This question has some answers here but there's a few problems. Basically I want to do the following: get caret position set innerHTML of the contenteditable (this resets the caret position) set the caret position to the value obtained in step 1. A lot of the existing answers seem to be complicated by cross-browser support but I only need it to work on modern chrome. It also needs to work with html. Ideally it would look exactly like this: var index = getCaretPosition(contentEditableDiv);

问题 in a content editable div, i wish get and set cursor position but but without taking into account the child elements ( , , etc for example). for get, i find this solution : Get a range's start and end offset's relative to its parent container but for set, i don't know. please, can u help me. thank u 回答1: You can use rangy to define it yourself, just like this: var selector = document.querySelector('[contenteditable]'); var setCaretIndex = function (index) { var charIndex = 0, stop = {}; var

问题 in a content editable div, i wish get and set cursor position but but without taking into account the child elements ( , , etc for example). for get, i find this solution : Get a range's start and end offset's relative to its parent container but for set, i don't know. please, can u help me. thank u 回答1: You can use rangy to define it yourself, just like this: var selector = document.querySelector('[contenteditable]'); var setCaretIndex = function (index) { var charIndex = 0, stop = {}; var

来源： https://stackoverflow.com/questions/21205785/how-to-make-html5-contenteditable-div-allowing-only-text-in-firefox

来源： https://stackoverflow.com/questions/50441833/contenteditable-with-white-space-pre-wrap-newline-insertion