获取#document-fragment的innerHTML而不是textContent

时间:2016-04-15 17:24:32

标签: javascript html css contenteditable

我有一个令人满意的p标签。当提取来自p标签的内容并将其插入另一个标签时,原始的所有标记都将丢失。有没有办法保存标记?

请注意,如果插入符号位于段落中的第i个位置,则字符将从该位置开始提取直至结束

function select() {
    var el = document.getElementById('p');
    el.focus();

    var sel = window.getSelection();
    var selRange = sel.getRangeAt(0);

    var range = selRange.cloneRange();
    range.selectNodeContents(el);
    range.setStart(selRange.endContainer, selRange.endOffset);

    document.getElementById('other').innerHTML = (range.extractContents().textContent);
    // return range.extractContents().textContent;
}
p {
	background-color: #eee;
}

.red {
  color: red;
}
<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>

3 个答案:

答案 0 :(得分:5)

range.extractContents()返回DocumentFragment

DocumentFragment没有innerHTML属性。 innerHTML来自Element界面,而textContentNode界面的一部分。 DocumentFragment继承自Node,但不是Element

这意味着你可以只追加整个片段,因为它是Node

&#13;
&#13;
function select() {
  var el = document.getElementById('p');
  el.focus();

  var sel = window.getSelection();
  var selRange = sel.getRangeAt(0);

  var range = selRange.cloneRange();
  range.selectNodeContents(el);
  range.setStart(selRange.endContainer, selRange.endOffset);

  //document.getElementById('other').innerHTML = (range.extractContents().textContent);
  var frag = range.extractContents();
  var i;
  var node;
  var other = document.getElementById('other');
  other.innerHTML = '';
  other.appendChild(frag);
}
&#13;
p {
	background-color: #eee;
}

.red {
  color: red;
}
&#13;
<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

供进一步参考,如果有人真的需要提取的片段的innerHTML。

该片段具有子节点,而这些子节点具有outerHTML属性,因此您只需从所有childNodes中获取const fragment = range.extractContents(); const htmlContent = [].map.call(fragment.childNodes, x => x.outerHTML).join('')

map.call

需要childNodes部分,因为尽管该片段具有childNodes属性,但是map没有{{1}}方法。

答案 2 :(得分:-1)

你的意思不是这样吗?

public class StethoHttpUrlFetcher implements DataFetcher<InputStream> {
    private final StethoURLConnectionManager stethoManager;
    public StethoHttpUrlFetcher(GlideUrl glideUrl) {
        ...
        this.stethoManager = new StethoURLConnectionManager("Glide");
    }

    private InputStream loadDataWithRedirects(...) {
        ...
        //urlConnection.setRequestProperty("Accept-Encoding", "gzip"); // don't request, it's wasteful for images
        ...
        stethoManager.preConnect(urlConnection, null);
        try {
            // Connect explicitly to avoid errors in decoders if connection fails.
            urlConnection.connect();
            stethoManager.postConnect();
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
        ...
    }

    private InputStream getStreamForSuccessfulRequest(HttpURLConnection urlConnection) throws IOException {
        try {
            InputStream responseStream = stethoManager.interpretResponseStream(urlConnection.getInputStream());
            if (TextUtils.isEmpty(urlConnection.getContentEncoding())) {
                ...
                stream = ContentLengthInputStream.obtain(responseStream, contentLength);
            } else {
                ...
                stream = responseStream;
            }
            return stream;
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
    }

    @Override public void cleanup() {
        ...
        if (isCancelled) { // otherwise it stays pending indefinitely because the stream is not read
            stethoManager.httpExchangeFailed(new IOException("Cancelled"));
        }
    }
}

你的javascript就这么简单:

document.getElementById('other').innerHTML = el.innerHTML;

修改

嘿,你拒绝投票给我答案,但你能解释一下你想要实现的目标吗?我在上面写的代码你可以看到在这个jsfiddle中工作:https://jsfiddle.net/936zuzky/1/

您想要保存原始标记 - 它已保存,您希望实现什么目标?