[JavaScript] javascript WYSISYG editor

insert html
ie10까지는 pasteHtml을 사용하면 되고,다른 브라우저는 execcommand를 사용하면

되지만 ie11은 둘다 지원하지 않기 때문에 별도의 개발이 필요하다.

하지만 이미 있으니 가져다 쓰면 되겠다.

https://gist.github.com/sergi/126762

insertNodeAtSelection : function(win, insertNode, _container, _pos)
{
// get current selection
var sel = this._getSelection(); var doc = this._getDoc();
 
// get the first range of the selection (there's almost always only
// one range)
var range = sel.getRangeAt(0);
 
// deselect everything
sel.removeAllRanges();
 
// remove content of current selection from document
range.deleteContents();
 
// get location of current selection
var container = _container ? _container : range.startContainer; var
pos = _pos ? _pos : range.startOffset;
 
// make a new range for the new selection
range=doc.createRange();
 
if (container.nodeType==3 && insertNode.nodeType==3) {
// if we insert text in a textnode, do optimized insertion
container.insertData(pos, insertNode.nodeValue);
 
// put cursor after inserted text
range.setEnd(container, pos+insertNode.length);
range.setStart(container, pos+insertNode.length);
 
} else {
var afterNode;
if (container.nodeType==3) {
// when inserting into a textnode we create 2 new textnodes and
// put the insertNode in between
 
var textNode = container; container = textNode.parentNode; var
text = textNode.nodeValue;
 
// text before the split
var textBefore = text.substr(0,pos);
// text after the split
var textAfter = text.substr(pos);
 
var beforeNode = doc.createTextNode(textBefore); afterNode =
doc.createTextNode(textAfter);
 
// insert the 3 new nodes before the old one
container.insertBefore(afterNode, textNode);
container.insertBefore(insertNode, afterNode);
container.insertBefore(beforeNode, insertNode);
 
// remove the old node
container.removeChild(textNode);
} else {
// else simply insert the node
afterNode = container.childNodes[pos];
container.insertBefore(insertNode, afterNode);
}
range.setEnd(afterNode, 0); range.setStart(afterNode, 0);
}
sel.addRange(range); return {c:container, p:pos};
}














검색해도 잘 안나오는 것만
작성중......


1. WebNote(구 spac editor)
http://www.webeditor.kr/
http://www.phpwork.kr/downloads/viewdo ··· Fwebnote

2. jwysiwyg
https://github.com/jwysiwyg/jwysiwyg
jQuery 기반

3. cheditor(유료)
http://www.chcode.com/products/cheditor.shtml
http://www.chcode.com/cheditor/demo.shtml

4. jqte
http://jqueryte.com/
http://jqueryte.com/demos



execCommand 테스트
http://www.quirksmode.org/dom/execCommand/
브라우저 호환성
http://www.quirksmode.org/dom/execCommand.html


http://www-archive.mozilla.org/editor/midas-spec.html


http://msdn.microsoft.com/en-us/library/aa741314%28VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/aa969729%28v=vs.85%29.aspx#basic
http://msdn.microsoft.com/en-us/library/ms536419%28v=vs.85%29.aspx


HTML Clipboard Format
http://msdn.microsoft.com/en-us/library/aa767917%28v=vs.85%29.aspx



ie inserthtml
http://stackoverflow.com/questions/3398378/execcommand-inserthtml-in-internet-explorer
http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div/6691294#6691294
http://jsfiddle.net/timdown/jwvha/527/


Rich-Text Editing in Mozilla
https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

Posted by incree

2014/01/11 08:41 2014/01/11 08:41
, ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/251

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다


Notices

Archives

Authors

  1. incree

Recent Trackbacks

Calendar

«   2020/11   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

Site Stats

Total hits:
722857
Today:
58
Yesterday:
213