如何在 ckeditor 5 中获取所选文本的 HTML 代码?
How to get HTML code of selected text in ckeditor 5?
如何在 ckeditor 5 中获取 HTML 选中的文本?
在 ckeditor 4 中有 getHTML() 方法。第 5 版模拟是什么?
你可以抓取一个范围内的选中文本,但是要抓取HTML,就有点棘手了。
我能够通过 switch
语句获取 parent
的 name
和 运行 值。
注意:下面的代码改编自这里:
const resultArea = document.querySelector('.selected');
let globalEditor;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => globalEditor = editor)
.catch(error => console.error(error));
const formatNode = (node) => {
switch (node.parent.name) {
case 'heading1' : return `<h1>${node.data}</h1>`;
case 'heading2' : return `<h2>${node.data}</h2>`;
case 'heading3' : return `<h3>${node.data}</h3>`;
case 'paragraph' : return `<p>${node.data}</p>`;
default : return '';
}
};
const getSelectedHTML = (editor) =>
[...editor.model.document.selection.getFirstRange().getItems()]
.filter(node => node.data)
.map(formatNode)
.join('\n');
document.querySelector('.btn').addEventListener('click', e => {
resultArea.value = getSelectedHTML(globalEditor);
});
<!-- https://cdn.ckeditor.com/#ckeditor5 -->
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<div id="editor">
<h1>This is a heading</h1>
<p>This is some sample content.</p>
</div>
<p>
<button class="btn">Get Selected HTML</button>
</p>
<textarea class="selected" rows="8" cols="72"></textarea>
您可以使用DataController#stringify to stringify your HTML from document's fragment using the getSelectedContent
import getSelectedContent from "@ckeditor/ckeditor5-engine/src/model/utils/getselectedcontent";
export default class CK5Utils{
static getSelectedHtml(ed) {
const {model, data, model:{document:{selection}}} = ed;
const range = selection.getFirstRange();
if (range.end.isEqual(range.start)) {
return '';
}
const selected = getSelectedContent(model, selection);
return data.stringify(selected);
}
}
按照 Alexandros Kyriakos 的建议使用 DataController#stringify and getSelectedContent,也可以这样做:
let sHtmlSelection = this.editor.data.stringify(this.editor.model.getSelectedContent(this.editor.model.document.selection));
如何在 ckeditor 5 中获取 HTML 选中的文本?
在 ckeditor 4 中有 getHTML() 方法。第 5 版模拟是什么?
你可以抓取一个范围内的选中文本,但是要抓取HTML,就有点棘手了。
我能够通过 switch
语句获取 parent
的 name
和 运行 值。
注意:下面的代码改编自这里:
const resultArea = document.querySelector('.selected');
let globalEditor;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => globalEditor = editor)
.catch(error => console.error(error));
const formatNode = (node) => {
switch (node.parent.name) {
case 'heading1' : return `<h1>${node.data}</h1>`;
case 'heading2' : return `<h2>${node.data}</h2>`;
case 'heading3' : return `<h3>${node.data}</h3>`;
case 'paragraph' : return `<p>${node.data}</p>`;
default : return '';
}
};
const getSelectedHTML = (editor) =>
[...editor.model.document.selection.getFirstRange().getItems()]
.filter(node => node.data)
.map(formatNode)
.join('\n');
document.querySelector('.btn').addEventListener('click', e => {
resultArea.value = getSelectedHTML(globalEditor);
});
<!-- https://cdn.ckeditor.com/#ckeditor5 -->
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<div id="editor">
<h1>This is a heading</h1>
<p>This is some sample content.</p>
</div>
<p>
<button class="btn">Get Selected HTML</button>
</p>
<textarea class="selected" rows="8" cols="72"></textarea>
您可以使用DataController#stringify to stringify your HTML from document's fragment using the getSelectedContent
import getSelectedContent from "@ckeditor/ckeditor5-engine/src/model/utils/getselectedcontent";
export default class CK5Utils{
static getSelectedHtml(ed) {
const {model, data, model:{document:{selection}}} = ed;
const range = selection.getFirstRange();
if (range.end.isEqual(range.start)) {
return '';
}
const selected = getSelectedContent(model, selection);
return data.stringify(selected);
}
}
按照 Alexandros Kyriakos 的建议使用 DataController#stringify and getSelectedContent,也可以这样做:
let sHtmlSelection = this.editor.data.stringify(this.editor.model.getSelectedContent(this.editor.model.document.selection));