本文整理匯總了TypeScript中@ephox/agar.Keys.backspace方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Keys.backspace方法的具體用法？TypeScript Keys.backspace怎麽用？TypeScript Keys.backspace使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/agar.Keys的用法示例。
在下文中一共展示了Keys.backspace方法的7個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: TinyApis
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyActions = TinyActions(editor);
Pipeline.async({}, [
tinyApis.sFocus,
Log.stepsAsStep('TBA', 'Delete keys for image block element', [
Logger.t('Should place the selection on the image block element on delete before', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a<img src="about:blank" class="block">b</p>'),
tinyApis.sSetSelection([0, 0], 1, [0, 0], 1),
tinyActions.sContentKeystroke(VK.DELETE, {}),
tinyApis.sAssertSelection([0], 1, [0], 2)
])),
Logger.t('Should place the selection on the image block element on delete before', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a</p><p><img src="about:blank" class="block"></p><p>b</p>'),
tinyApis.sSetSelection([0, 0], 1, [0, 0], 1),
tinyActions.sContentKeystroke(VK.DELETE, {}),
tinyApis.sAssertSelection([1], 0, [1], 1)
]))
]),
Log.stepsAsStep('TBA', 'Backspace keys for image block element', [
Logger.t('Should place the selection on the image block element on backspace after', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a<img src="about:blank" class="block">b</p>'),
tinyApis.sSetSelection([0, 2], 0, [0, 2], 0),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([0], 1, [0], 2)
])),
Logger.t('Should place the selection on the image block element on backspace after', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a</p><p><img src="about:blank" class="block"></p><p>b</p>'),
tinyApis.sSetSelection([2, 0], 0, [2, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([1], 0, [1], 1)
]))
]),
Log.stepsAsStep('TBA', 'Backspace/delete before on non block images should not select the image', [
Logger.t('Should place the selection on the image block element on backspace after', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a<img src="about:blank">b</p>'),
tinyApis.sSetSelection([0, 0], 1, [0, 0], 1),
tinyActions.sContentKeystroke(VK.DELETE, {}),
tinyApis.sAssertSelection([0, 0], 1, [0, 0], 1)
])),
Logger.t('Should place the selection on the image block element on backspace after', GeneralSteps.sequence([
tinyApis.sSetContent('<p>a<img src="about:blank">b</p>'),
tinyApis.sSetSelection([0, 2], 0, [0, 2], 0),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([0, 2], 0, [0, 2], 0)
]))
])
], onSuccess, onFailure);
}, {示例2: function
const sFakeBackspaceKeyOnRange = function (editor) {
return GeneralSteps.sequence([
Step.sync(function () {
editor.getDoc().execCommand('Delete', false, null);
}),
sKeyUp(editor, Keys.backspace())
]);
};示例3: TinyApis
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyActions = TinyActions(editor);
Pipeline.async({}, [
Logger.t('backspace from p inside div into li', GeneralSteps.sequence([
tinyApis.sFocus,
tinyApis.sSetContent('<ul><li>a</li></ul><div><p><br /></p></div>'),
tinyApis.sSetCursor([1, 0, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), { }),
tinyApis.sAssertContent('<ul><li>a</li></ul>')
])),
Logger.t('backspace from p inside blockquote into li', GeneralSteps.sequence([
tinyApis.sFocus,
tinyApis.sSetContent('<ul><li>a</li></ul><blockquote><p><br /></p></blockquote>'),
tinyApis.sSetCursor([1, 0, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), { }),
tinyApis.sAssertContent('<ul><li>a</li></ul>')
])),
Logger.t('backspace from b inside p inside blockquote into li', GeneralSteps.sequence([
tinyApis.sFocus,
tinyApis.sSetContent('<ul><li>a</li></ul><blockquote><p><b><br /></b></p></blockquote>'),
tinyApis.sSetCursor([1, 0, 0, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), { }),
tinyApis.sAssertContent('<ul><li>a</li></ul>')
])),
Logger.t('backspace from span inside p inside blockquote into li', GeneralSteps.sequence([
tinyApis.sFocus,
tinyApis.sSetContent('<ul><li>a</li></ul><blockquote><p><span class="x"><br /></span></p></blockquote>'),
tinyApis.sSetCursor([1, 0, 0, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), { }),
tinyApis.sAssertContent('<ul><li>a</li></ul>')
])),
Logger.t('backspace from p into li', GeneralSteps.sequence([
tinyApis.sFocus,
tinyApis.sSetContent('<ul><li>a</li></ul><p><br /></p>'),
tinyApis.sSetCursor([1, 0], 0),
tinyActions.sContentKeystroke(Keys.backspace(), { }),
tinyApis.sAssertContent('<ul><li>a</li></ul>')
]))
], onSuccess, onFailure);
}, {示例4: TinyApis
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyActions = TinyActions(editor);
const sTestBackspace = sTestDeleteOrBackspaceKey(editor, tinyApis, tinyActions, Keys.backspace());
const sTestDelete = sTestDeleteOrBackspaceKey(editor, tinyApis, tinyActions, 46);
Pipeline.async({}, [
tinyApis.sFocus,
Logger.t('Backspace key on text', GeneralSteps.sequence([
sTestBackspace('<p>a<a href="#">b</a>c</p>', [0, 2], 0, '<p>a<a href="#">b</a>c</p>', 'end', [0, 1, 0], 1),
sTestBackspace('<p>a<a href="#">b</a>c</p>', [0, 1, 0], 0, '<p>a<a href="#">b</a>c</p>', 'before', [0, 0], 1),
sTestBackspace('<p>a<a href="#">bc</a>d</p>', [0, 1, 0], 1, '<p>a<a href="#">c</a>d</p>', 'start', [0, 1, 0], 1)
])),
Logger.t('Backspace key on image', GeneralSteps.sequence([
sTestBackspace('<p>a<a href="#"><img src="#" /></a>c</p>', [0, 2], 0, '<p>a<a href="#"><img src="#" /></a>c</p>', 'end', [0, 1, 1], 0),
sTestBackspace('<p>a<a href="#"><img src="#" /></a>c</p>', [0, 1], 0, '<p>a<a href="#"><img src="#" /></a>c</p>', 'before', [0, 0], 1),
tinyApis.sExecCommand('SelectAll'), // Needed for IE 11 for some odd reason the selection api is in some odd state
sTestBackspace('<p>a<a href="#"><img src="#" />c</a>d</p>', [0, 1], 1, '<p>a<a href="#">c</a>d</p>', 'start', [0, 1, 0], 1)
])),
Logger.t('Delete key on text', GeneralSteps.sequence([
sTestDelete('<p>a<a href="#">b</a>c</p>', [0, 0], 1, '<p>a<a href="#">b</a>c</p>', 'start', [0, 1, 0], 1),
sTestDelete('<p>a<a href="#">b</a>c</p>', [0, 1, 0], 1, '<p>a<a href="#">b</a>c</p>', 'after', [0, 2], 1),
sTestDelete('<p>a<a href="#">bc</a>d</p>', [0, 1, 0], 1, '<p>a<a href="#">b</a>d</p>', 'end', [0, 1, 0], 1)
])),
Logger.t('Delete key on image', GeneralSteps.sequence([
sTestDelete('<p>a<a href="#"><img src="#" /></a>c</p>', [0, 0], 1, '<p>a<a href="#"><img src="#" /></a>c</p>', 'start', [0, 1, 0], 1),
sTestDelete('<p>a<a href="#"><img src="#" /></a>c</p>', [0, 1], 1, '<p>a<a href="#"><img src="#" /></a>c</p>', 'after', [0, 2], 1),
sTestDelete('<p>a<a href="#">b<img src="#" /></a>d</p>', [0, 1, 0], 1, '<p>a<a href="#">b</a>d</p>', 'end', [0, 1, 0], 1)
])),
Logger.t('Backspace/delete last character', GeneralSteps.sequence([
sTestDelete('<p>a<a href="#">b</a>c</p>', [0, 1, 0], 0, '<p>ac</p>', 'none', [0, 0], 1),
sTestDelete('<p><img src="#1" /><a href="#">b</a><img src="#2" /></p>', [0, 1, 0], 0, '<p><img src="#1" /><img src="#2" /></p>', 'none', [0], 1),
sTestDelete('<p>a<a href="#">b</a>c</p>', [0, 1, 0], 0, '<p>ac</p>', 'none', [0, 0], 1),
tinyApis.sAssertContentStructure(paragraphWithText('ac')),
sTestBackspace('<p>a<a href="#">b</a>c</p>', [0, 1, 0], 1, '<p>ac</p>', 'none', [0, 0], 1),
tinyApis.sAssertContentStructure(paragraphWithText('ac')),
sTestDelete('<p>a<a href="#"><img src="#1" /></a>c</p>', [0, 1], 0, '<p>ac</p>', 'none', [0, 0], 1),
sTestBackspace('<p>a<a href="#"><img src="#1" /></a>c</p>', [0, 1], 1, '<p>ac</p>', 'none', [0, 0], 1)
])),
Logger.t('Backspace/delete between blocks', GeneralSteps.sequence([
sTestBackspace('<p><a href="#">a</a></p><p><a href="#">b</a></p>', [1], 0, '<p><a href="#">a</a><a href="#">b</a></p>', 'end', [0, 0, 0], 1),
sTestDelete('<p><a href="#">a</a></p><p><a href="#">b</a></p>', [0], 1, '<p><a href="#">a</a><a href="#">b</a></p>', 'end', [0, 0, 0], 1)
])),
Logger.t('Backspace key inline_boundaries: false', GeneralSteps.sequence([
tinyApis.sSetSetting('inline_boundaries', false),
sTestBackspace('<p>a<a href="#">b</a>c</p>', [0, 2], 0, '<p>a<a href="#">b</a>c</p>', 'after', [0, 2], 0),
tinyApis.sSetSetting('inline_boundaries', true)
]))
], onSuccess, onFailure);
}, {示例5: TinyUi
//.........這裏部分代碼省略.........
{ title: 'exclamation-a', text: 'exclamation-a' },
{ title: 'exclamation-b', text: 'exclamation-b' },
{ title: 'exclamation-c', text: 'exclamation-c' },
{ title: 'exclamation-d', text: 'exclamation-d' }
]
]
},
choice: GeneralSteps.sequence([
Keyboard.sKeydown(eDoc, Keys.down(), { }),
Keyboard.sKeydown(eDoc, Keys.down(), { }),
Keyboard.sKeydown(eDoc, Keys.enter(), { })
]),
assertion: store.sAssertEq('Exclamation-c should fire', [ 'exclamation:exclamation-c' ])
});
const sTestFifthAutocomplete = sTestAutocompleter({
triggerChar: '=',
content: 'test=t',
structure: {
type: 'grid',
groups: [
[
{ title: 'two', icon: '=' },
{ title: 'three', icon: '=' }
]
]
},
choice: GeneralSteps.sequence([
Keyboard.sKeydown(eDoc, Keys.enter(), { })
]),
assertion: tinyApis.sAssertContent('<p>test=two</p>')
});
const sSetContentAndTrigger = (content: string, triggerCharCode: number) => {
return GeneralSteps.sequence([
tinyApis.sSetContent(`<p>${content}</p>`),
tinyApis.sSetCursor([ 0, 0 ], content.length),
Keyboard.sKeydown(eDoc, triggerCharCode, { }),
Keyboard.sKeypress(eDoc, triggerCharCode, { })
]);
};
const sTestAutocompleteActivation = GeneralSteps.sequence([
store.sClear,
sSetContentAndTrigger('test=', '='.charCodeAt(0)),
// Can't wait for anything to change, so just wait for a prefixed amount of time
Step.wait(500),
UiFinder.sNotExists(Body.body(), '.tox-autocompleter'),
sSetContentAndTrigger('test=t', '='.charCodeAt(0)),
tinyUi.sWaitForPopup('wait for autocompleter to appear', '.tox-autocompleter div[role="menu"]'),
sAssertAutocompleterStructure({
type: 'grid',
groups: [
[
{ title: 'two', icon: '=' },
{ title: 'three', icon: '=' }
]
]
}),
// Check the options shrink to 1 item
sSetContentAndTrigger('test=tw', 'w'.charCodeAt(0)),
Waiter.sTryUntil('Wait for autocompleter to update items', sAssertAutocompleterStructure({
type: 'grid',
groups: [
[
{ title: 'two', icon: '=' }
]
]
}), 100, 1000),
// Check the autocompleter is hidden/closed when no items match
sSetContentAndTrigger('test=twe', 'e'.charCodeAt(0)),
sWaitForAutocompleteToClose,
// Check the autocompleter is shown again when deleting a char
sSetContentAndTrigger('test=tw', Keys.backspace()),
tinyUi.sWaitForPopup('wait for autocompleter to appear', '.tox-autocompleter div[role="menu"]'),
sAssertAutocompleterStructure({
type: 'grid',
groups: [
[
{ title: 'two', icon: '=' }
]
]
}),
Keyboard.sKeydown(eDoc, Keys.enter(), { }),
sWaitForAutocompleteToClose
]);
Pipeline.async({ }, Logger.ts(
'Trigger autocompleter',
[
tinyApis.sFocus,
Logger.t('Checking first autocomplete (columns = 1) trigger: "+"', sTestFirstAutocomplete),
Logger.t('Checking second autocomplete (columns = 2), two sources, trigger ":"', sTestSecondAutocomplete),
Logger.t('Checking third autocomplete (columns = auto) trigger: "~"', sTestThirdAutocomplete),
Logger.t('Checking forth autocomplete, (columns = 1), trigger: "!", no icons', sTestFourthAutocomplete),
Logger.t('Checking fifth autocomplete, trigger: "=", custom activation check', sTestFifthAutocomplete),
Logger.t('Checking autocomplete activation based on content', sTestAutocompleteActivation)
]
), onSuccess, onFailure);
},示例6: function
const sKeyboardBackspace = function (editor) {
return Keyboard.sKeystroke(Element.fromDom(editor.getDoc()), Keys.backspace(), {});
};示例7: function
const sTestDelete = function (editor, tinyApis, tinyActions) {
return GeneralSteps.sequence([
tinyApis.sFocus,
Logger.t('Should delete single space between cef elements', GeneralSteps.sequence([
tinyApis.sSetContent('<p><span contenteditable="false">a</span> <span contenteditable="false">b</span> </p>'),
tinyApis.sSetSelection([0, 2], 1, [0, 2], 1),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([0, 1], 1, [0, 1], 1),
tinyApis.sAssertContentStructure(
ApproxStructure.build(function (s, str, arr) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.element('span', {
attrs: {
contenteditable: str.is('false')
},
children: [
s.text(str.is('a'))
]
}),
s.text(str.is(Zwsp.ZWSP)),
s.element('span', {
attrs: {
contenteditable: str.is('false')
},
children: [
s.text(str.is('b'))
]
}),
s.text(str.is('\u00a0'))
]
})
]
});
})
)
])),
Logger.t('Should add fake caret if we delete content beside cef elements', GeneralSteps.sequence([
tinyApis.sSetContent('<p><span contenteditable="false">a</span> </p>'),
tinyApis.sSetSelection([0, 2], 1, [0, 2], 1),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([0, 1], 1, [0, 1], 1),
tinyApis.sAssertContentStructure(
ApproxStructure.build(function (s, str, arr) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.element('span', {
attrs: {
contenteditable: str.is('false')
},
children: [
s.text(str.is('a'))
]
}),
s.text(str.is(Zwsp.ZWSP))
]
})
]
});
})
)
])),
Logger.t('Should add fake caret if we delete range beside cef', GeneralSteps.sequence([
tinyApis.sSetContent('<p><span contenteditable="false">a</span> abc</p>'),
tinyApis.sSetSelection([0, 2], 0, [0, 2], 4),
tinyActions.sContentKeystroke(Keys.backspace(), {}),
tinyApis.sAssertSelection([0, 1], 1, [0, 1], 1),
tinyApis.sAssertContentStructure(
ApproxStructure.build(function (s, str, arr) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.element('span', {
attrs: {
contenteditable: str.is('false')
},
children: [
s.text(str.is('a'))
]
}),
s.text(str.is(Zwsp.ZWSP))
]
})
]
});
})
)
]))
]);
};