ios开发html文本编辑器,iOS 富文本编辑器

使用CoreText 还是使用WebView 优缺点比较

CoreText

开发维护困难，代码繁琐，逻辑太多，以后维护很困难

优点就是 性能 体验好

WebView

简单，快捷， 维护简单

缺点 js html 知识欠缺，与OC交互问题

webview 开发编辑器的知识点

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. 关键的几个问题

如何插入图片，删除图片 ？

插入图片使用execommand insertImage，传入必要的参数就会显示出图片，

删除的话，按删除键 会直接把整个img标签全部一次删除了。

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 = "
";

// var img = '';

// editableContent.appendChild(imageElement);

// editableContent.appendChild(breakElement);

var html = '';

// document.execCommand('insertImage',false,imagePath);

document.execCommand('insertHTML',false,html);

}

如何调整offset ，不让键盘盖住输入区域？