使用CoreText 還是使用WebView 優(yōu)缺點比較
CoreText
開發(fā)維護困難钧舌，代碼繁瑣挟伙，邏輯太多，以后維護很困難
優(yōu)點就是 性能 體驗好WebView
簡單，快捷募狂， 維護簡單
缺點 js html 知識欠缺畜份，與OC交互問題
webview 開發(fā)編輯器的知識點
- Selection WebAPIs->Selection
A **Selection** object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or modification, call window.getSelection().
A user may make a selection from left to right (in document order) or right to left (reverse of document order). The anchor is where the user began the selection and the focus is where the user ends the selection. If you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button and the focus is placed where you released the mouse button. Anchor and focus should not be confused with the start and end positions of a selection, since anchor can be placed before the focus or vice versa, depending on the direction you made your selection.
- Range
The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
A range can be created using the createRange() method of the Document object. Range objects can also be retrieved by using the getRangeAt() method of the Selection object or the caretRangeFromPoint() method of the Documentobject.
There also is the Range() constructor available.
Document.execCommand
When an HTML document has been switched to [designMode](designMode.html), its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or [contentEditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) elements.
Most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link), or affect an entire line (indenting). When using contentEditable, execCommand() affects the currently active editable element.
- selectionchange 事件
The **selectionchange** event of the Selection API is fired when the current text selection on a document is changed.
document.addEventListener("selectionchange", function() {
console.log('Selection changed.');
});
3. 關(guān)鍵的幾個問題
- 如何插入圖片诞帐，刪除圖片 ？
插入圖片使用execommand insertImage爆雹，傳入必要的參數(shù)就會顯示出圖片停蕉，
刪除的話，按刪除鍵 會直接把整個img標(biāo)簽全部一次刪除了钙态。
function insertImage(imageName, imagePath) {
restoreSelection();
var imageElement = document.createElement('img');
var breakElement = document.createElement('div');
imageElement.setAttribute('src', imagePath);
imageElement.setAttribute('id', imageName);
breakElement.innerHTML = "<br>";
// var img = '<img src="+'imagePath'" />';
// editableContent.appendChild(imageElement);
// editableContent.appendChild(breakElement);
var html = '<img src="' + imagePath + '" alt="' + '' + '" />';
// document.execCommand('insertImage',false,imagePath);
document.execCommand('insertHTML',false,html);
}
如何調(diào)整offset 慧起，不讓鍵盤蓋住輸入?yún)^(qū)域？
http://ghmagical.com/article/page/id/UjkNGQ0vmFFF
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
http://www.reibang.com/p/c4d7824362cb
