WebView编辑器问题小结前提：最近开发的编辑器新增了文字样式功能，遇到了些问题，这里做个小结文字样式包括：默认颜色

前提：最近开发的编辑器新增了文字样式功能，遇到了些问题，这里做个小结

文字样式包括：默认颜色、备选颜色；修改字号16、18、正常14字号；加粗、斜体、下划线；段落样式居左、居中、居右；引用格式

问题

1、iOS系统下加粗、斜体、下划线设置取消，中文键盘无效果

解决方案： 需设置取消加粗等样式后需要设置一个&zwnj;，即零宽不连字，其作用是抑制本来会发生的连字，同时需要注意在用户选择状态下可以不设置&zwnj;

document.execCommand('bold', false, null);
document.execCommand('insertHTML', false, '&zwnj;');

参考：HTML中  &ensp; &emsp;  等6种空白空格的区别

2、iOS系统下加粗、斜体、下划线取消成功后，保留之前的样式

解决方案： 由于设置了&zwnj;导致的之前的样式全部丢失，故需要重新设置

   // itemtr：当前操作类型，以bold为例
	
   var fontSizeblock = document.queryCommandValue('fontSize');
   var foreColorblock = document.queryCommandValue('foreColor');
   var isBold = document.queryCommandState('bold')
   var isItalic = document.queryCommandState('italic')
   var isUnderline = document.queryCommandState('underline')
   var selectStr = window.getSelection().toString();
   if (itemStr=='bold') {
 		document.execCommand('bold', false, null);
      	if (selectStr.length < 1){
      		document.execCommand('insertHTML', false, '&zwnj;');
         	if (isItalic) { RE.setItalic() }
        	if (isUnderline) { RE.setUnderline() }
        }
    }
    if (selectStr.length < 1){
        if (fontSizeblock.length > 0) {
            document.execCommand('fontSize', false, fontSizeblock);
        }
        if (foreColorblock.length > 0) {
            document.execCommand('foreColor', false, foreColorblock);
        }
    }

3、用户插入自定义表情`<img>`，保留之前的样式

解决方案： 同上，重新设置插入表情前的样式

	// itemStr：当前操作类型，insertHTML
	
	var fontSizeblock = document.queryCommandValue('fontSize');
  	var foreColorblock = document.queryCommandValue('foreColor');
  	var isBold = document.queryCommandState('bold')
  	var isItalic = document.queryCommandState('italic')
  	var isUnderline = document.queryCommandState('underline')
  	var selectStr = window.getSelection().toString();
   	if (itemStr=='insertHTML') {
 		document.execCommand('insertHTML', false, html);
      	if (selectStr.length < 1){
      		if (isBold) { RE.setBold() }
         	if (isItalic) { RE.setItalic() }
        	if (isUnderline) { RE.setUnderline() }
        }
  	}
  	
  	if (selectStr.length < 1){
  		if (fontSizeblock.length > 0) {
       	document.execCommand('fontSize', false, fontSizeblock);
       }
       if (foreColorblock.length > 0) {
       	document.execCommand('foreColor', false, foreColorblock);
       }
  	}

4、文本设置引用样式及取消引用

解决方案： 引用样式的设置跟加粗、斜体的取消样式不同，需监听当前的样式，若为引用样式则取消，同时由于设置引用后文本的段落样式会丢失，需同步引用前的段落样式

	var isLeft = document.queryCommandState('justifyLeft')
  	var isCenter = document.queryCommandState('justifyCenter')
  	var isRight = document.queryCommandState('justifyRight')
    
 	var formatBlock = document.queryCommandValue('formatBlock');
   	if (formatBlock=='blockquote') {
        document.execCommand('formatBlock', false, '<p>');
   	} else {
        document.execCommand('formatBlock', false, '<blockquote>');
   	}
            
   	if (isLeft) {
        document.execCommand('justifyLeft', false, null);
   	} else if (isCenter) {
        document.execCommand('justifyCenter', false, null);
   	} else if (isRight) {
        document.execCommand('justifyRight', false, null);
   }

5、全选文本将其设置为引用样式，但全选的图片、分割线等div卡片不可设置为引用

解决方案： 获取用户选中的html内容var selectStr = getSelectionHtml(window);，若其包括卡片内容则将其进行回调，将<p>标签替换为<blockquote>，然后将替换后的html重新加载

/// 获取选中的html
function getSelectionHtml(win){
    if (win.getSelection) {
        var range=win.getSelection().getRangeAt(0);
        var container = win.document.createElement('div');
        container.appendChild(range.cloneContents());
        return container.innerHTML;
    } else if (win.document.getSelection) {
        var range=win.getSelection().getRangeAt(0);
        var container = win.document.createElement('div');
        container.appendChild(range.cloneContents());
        return container.innerHTML;
    } else if (win.document.selection) {
        return win.document.selection.createRange().htmlText;
    }
}

6、引用无内容时不可插入图片、分割线等div卡片

解决方案： 在引用插入卡片div前，先插入零宽连字&zwj;即可

WebView编辑器问题小结

问题