如何在插入符号位置的 UIWebview 中插入图像？

Question

这是我目前用于插入图像的代码，但是，我的 webview 在插入后失去了焦点。但最奇怪的是，我还为 keyboardWillShowNotification 设置了通知；并在插入后调用此通知，但不存在键盘。

谁能给出这个问题的任何解决方案？

//allow me to programmatically bring up keyboard
_changWeiBo.keyboardDisplayRequiresUserAction = NO;
[_changWeiBo stringByEvaluatingJavaScriptFromString:@"document.getElementById('content').focus()"];

[_changWeiBo stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.execCommand('insertImage', false, '%@')", imagePath]];

//disallow me to programmatically bring up keyboard
_changWeiBo.keyboardDisplayRequiresUserAction = YES;

Answer 1

我没有使用'insertImage' 命令，因为我需要图像的特定格式（在我的情况下，html 将保持拇指，点击时将全屏打开）。它也应该与insertImage 命令一起正常工作。这是objective-c代码：

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    NSAssert([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:(NSString *)kUTTypeImage], @"Unhandled type: %@", [info objectForKey:UIImagePickerControllerMediaType]);
    // this is just to gather some paths for the picked image
    [_rtDelegate richEditor:self saveImage:[info objectForKey:UIImagePickerControllerEditedImage] completion:^(NSString *thumbPath, NSString *largePath, CGSize thumbSize) {
        [self stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"docState.insertImage('%@', '%@', %d)", thumbPath, largePath, (int)thumbSize.height/2]];
    }];

    [picker dismissModalViewControllerAnimated:YES];
}
-(void)onTapInsertPhoto:(UIBarButtonItem *)sender{
    [self stringByEvaluatingJavaScriptFromString:@"docState.prepareInsertImage();"];
    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
    imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    imagePicker.delegate = self;
    imagePicker.mediaTypes = [NSArray arrayWithObject:(NSString *)kUTTypeImage];
    imagePicker.allowsEditing = YES;

    UIViewController *vc = [[[UIApplication sharedApplication] keyWindow] rootViewController];
    [vc presentViewController:imagePicker animated:YES completion:nil];
    [imagePicker release];
}

这是 javascript（最重要的是 focusRange 和 backupRange）：

this.prepareInsertImage = function(){
    try{
        backuprange();
    }
    catch(exc){
        log('prepareInertImage: ' + exc);
    }
}
this.insertImage = function(thumbPath, largePath, displayHeight){
    try{
        restorerange();
        // may work with the insertImage command here
        var imgwrap = document.createElement('a');
        imgwrap.href = largePath;
        imgwrap.setAttribute('href', 'rte:image:'+largePath);
        imgwrap.setAttribute('contenteditable', 'false');
        imgwrap.className = 'imgwrap';
        var img = document.createElement('img');
        img.setAttribute('src', thumbPath);
        img.setAttribute('height', displayHeight);
        imgwrap.appendChild(img);
        window.getSelection().getRangeAt(0).insertNode(imgwrap);
    }
    catch(exc){
        log('insertImage: ' + exc);
    }
}
var focusRange;
function backuprange(){
    var selection = window.getSelection();
    focusRange = selection.getRangeAt(0);
    focusRange.setEnd(focusRange.startContainer, focusRange.startOffset);
}
function restorerange(){
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(focusRange);
}

Objective-c 代码中不需要“docState”，javascript 代码中不需要“this”——我使用它们是因为我有一个在 javascript 中有更多方法的类，它也包含一些状态。

还要注意keyboardDisplayRequiresUserAction只适用于iOS 6.0+，所以以前的iOS系统不会自动显示键盘（但仍然会在正确的位置插入图像）。

Answer 2

感谢@alex-i，下面的这个解决方案（由我自己增强）完美地解决了当用户无法在插入符号位置插入图像时的错误，因为 UIWebview 在其他视图时失去焦点。

这是在插入符号位置插入图像的最小工作版本。

    this.prepareInsertImage = function(){
        try{
            backuprange();
        }
        catch(exc){
            log('prepareInsertImage: ' + exc);
        }
    }

    this.insertImage = function(imgPath){
        try{
            restorerange();
            document.execCommand("InsertImage",true,imgPath);
        }
        catch(exc){
            log('insertImage: ' + exc);
        }
    }
    var focusRange;
    function backuprange(){
        var selection = window.getSelection();
        focusRange = selection.getRangeAt(0);
        focusRange.setEnd(focusRange.startContainer, focusRange.startOffset);
    }
    function restorerange(){
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(focusRange);
    }

对于以后想要使用此代码的任何人，只需调用此代码：

    //Before UIImagePicker pops up
    [yourWebView stringByEvaluatingJavaScriptFromString:@"prepareInsertImage()"];

    //After UIImagePicker selects a image and you edit and store the image elsewhere
    NSString* imagePath = @"the path for your image....";
    [yourWebView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"insertImage('%@')",imagePath]];