UnitTest.asynctest('browser.tinymce.plugins.visualchars.PluginTest', (success, failure) => {
Plugin();
Theme();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyUi = TinyUi(editor);
const tinyApis = TinyApis(editor);
Pipeline.async({}, Log.steps('TBA', 'VisualChars: Set content, click visual chars button and assert span char is present in whitespaces, click the button again and assert no span is present in the whitespace', [
tinyApis.sSetContent('<p>a b</p>'),
Assertions.sAssertEq('assert equal', 0, editor.dom.select('span').length),
tinyUi.sClickOnToolbar('click on visualchars button', 'button'),
tinyApis.sAssertContentStructure(sAssertSpanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'button'),
tinyApis.sAssertContentStructure(sAssertNbspStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'button'),
tinyApis.sAssertContentStructure(sAssertSpanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'button'),
tinyApis.sAssertContentStructure(sAssertNbspStruct)
]), onSuccess, onFailure);
}, {
plugins: 'visualchars',
toolbar: 'visualchars',
base_url: '/project/tinymce/js/tinymce'
}, success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.visualchars.DefaultStateTest', (success, failure) => {
Plugin();
Theme();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyUi = TinyUi(editor);
const tinyApis = TinyApis(editor);
Pipeline.async({}, [
tinyApis.sSetContent('<p>a b</p>'),
// Need to trigger a keydown event to get the visual chars to show after calling set content
Keyboard.sKeydown(Element.fromDom(editor.getDoc()), Keys.space(), { }),
Waiter.sTryUntil('Wait for visual chars to show', tinyApis.sAssertContentStructure(sAssertSpanStruct), 50, 1000),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertNbspStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertSpanStruct)
], onSuccess, onFailure);
}, {
plugins: 'visualchars',
toolbar: 'visualchars',
skin_url: '/project/js/tinymce/skins/lightgray',
visualchars_default_state: true
}, success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.visualchars.PluginTest', (success, failure) => {
Plugin();
Theme();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyUi = TinyUi(editor);
const tinyApis = TinyApis(editor);
Pipeline.async({}, [
tinyApis.sSetContent('<p>a b</p>'),
Assertions.sAssertEq('assert equal', 0, editor.dom.select('span').length),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertSpanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertNbspStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertSpanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(sAssertNbspStruct)
], onSuccess, onFailure);
}, {
plugins: 'visualchars',
toolbar: 'visualchars',
skin_url: '/project/js/tinymce/skins/lightgray'
}, success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.visualchars.PluginTest', function () {
const success = arguments[arguments.length - 2];
const failure = arguments[arguments.length - 1];
Plugin();
Theme();
const spanStruct = ApproxStructure.build(function (s, str) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.text(str.is('a')),
s.element('span', {}),
s.element('span', {}),
s.text(str.is('b'))
]
})
]
});
});
const nbspStruct = ApproxStructure.build(function (s, str) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.text(str.is('a')),
s.text(str.is('\u00a0')),
s.text(str.is('\u00a0')),
s.text(str.is('b'))
]
})
]
});
});
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyUi = TinyUi(editor);
const tinyApis = TinyApis(editor);
Pipeline.async({}, [
tinyApis.sSetContent('<p>a b</p>'),
Assertions.sAssertEq('assert equal', 0, editor.dom.select('span').length),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(spanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(nbspStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(spanStruct),
tinyUi.sClickOnToolbar('click on visualchars button', 'div[aria-label="Show invisible characters"] > button'),
tinyApis.sAssertContentStructure(nbspStruct)
], onSuccess, onFailure);
}, {
plugins: 'visualchars',
toolbar: 'visualchars',
skin_url: '/project/js/tinymce/skins/lightgray'
}, success, failure);
});
export default function () {
AdvListPlugin();
AnchorPlugin();
AutoLinkPlugin();
AutoResizePlugin();
AutoSavePlugin();
BbCodePlugin();
CharMapPlugin();
CodePlugin();
CodeSamplePlugin();
ColorPickerPlugin();
ContextMenuPlugin();
DirectionalityPlugin();
EmoticonsPlugin();
FullPagePlugin();
FullScreenPlugin();
HrPlugin();
ImagePlugin();
ImageToolsPlugin();
ImportCssPlugin();
InsertDatetimePlugin();
LegacyOutputPlugin();
LinkPlugin();
ListsPlugin();
MediaPlugin();
NonBreakingPlugin();
NonEditablePlugin();
PageBreakPlugin();
PastePlugin();
PreviewPlugin();
PrintPlugin();
SavePlugin();
SearchReplacePlugin();
SpellCheckerPlugin();
TabFocusPlugin();
TablePlugin();
TemplatePlugin();
TextColorPlugin();
TextPatternPlugin();
TocPlugin();
VisualBlocksPlugin();
VisualCharsPlugin();
WordCountPlugin();
ModernTheme();
MobileTheme();
HelpPlugin();
PluginManager.urls.emoticons = '../../../../js/tinymce/plugins/emoticons';
const settings = {
skin_url: '../../../../js/tinymce/skins/lightgray',
codesample_content_css: '../../../../js/tinymce/plugins/codesample/css/prism.css',
visualblocks_content_css: '../../../../js/tinymce/plugins/visualblocks/css/visualblocks.css',
images_upload_url: 'd',
selector: 'textarea',
// rtl_ui: true,
link_list: [
{ title: 'My page 1', value: 'http://www.tinymce.com' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_list: [
{ title: 'My page 1', value: 'http://www.tinymce.com' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
importcss_append: true,
height: 400,
file_picker_callback (callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype === 'file') {
callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
}
// Provide image and alt text for the image dialog
if (meta.filetype === 'image') {
callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
}
// Provide alternative source and posted for the media dialog
if (meta.filetype === 'media') {
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
}
},
spellchecker_callback (method, text, success, failure) {
const words = text.match(this.getWordCharPattern());
if (method === 'spellcheck') {
const suggestions = {};
for (let i = 0; i < words.length; i++) {
suggestions[words[i]] = ['First', 'Second'];
}
success(suggestions);
}
if (method === 'addToDictionary') {
success();
}
},
templates: [
{ title: 'Some title 1', description: 'Some desc 1', content: 'My content' },
{ title: 'Some title 2', description: 'Some desc 2', content: '<div class="mceTmpl"><span class="cdate">cdate</span><span class="mdate">mdate</span>My content2</div>' }
],
template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
image_caption: true,
theme: 'modern',
mobile: {
plugins: [
'autosave lists'
]
},
plugins: [
'autosave advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern',
'codesample help noneditable print'
],
add_unload_trigger: false,
toolbar: 'insertfile undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table codesample code | ltr rtl'
};
EditorManager.init(settings);
EditorManager.init(Merger.deepMerge(settings, { inline: true, selector: 'div.tinymce' }));
window.tinymce = EditorManager;
}
NonEditablePlugin();
PageBreakPlugin();
PastePlugin();
PreviewPlugin();
PrintPlugin();
SavePlugin();
SearchReplacePlugin();
SpellCheckerPlugin();
TabFocusPlugin();
TablePlugin();
TemplatePlugin();
TextColorPlugin();
TextPatternPlugin();
TocPlugin();
VisualBlocksPlugin();
VisualCharsPlugin();
WordCountPlugin();
ModernTheme();
export default function () {
const config = {
theme: 'modern',
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern codesample'
],
/*
menubar: 'file edit insert view format table tools',
menu: {
file: { title: 'File', items: 'newdocument' },
export default function () {
AdvListPlugin();
AnchorPlugin();
AutoLinkPlugin();
AutoResizePlugin();
AutoSavePlugin();
BbCodePlugin();
CharMapPlugin();
CodePlugin();
CodeSamplePlugin();
ColorPickerPlugin();
ContextMenuPlugin();
DirectionalityPlugin();
EmoticonsPlugin();
FullPagePlugin();
FullScreenPlugin();
HrPlugin();
ImagePlugin();
ImageToolsPlugin();
ImportCssPlugin();
InsertDatetimePlugin();
LegacyOutputPlugin();
LinkPlugin();
ListsPlugin();
MediaPlugin();
NonBreakingPlugin();
NonEditablePlugin();
PageBreakPlugin();
PastePlugin();
PreviewPlugin();
PrintPlugin();
SavePlugin();
SearchReplacePlugin();
SpellCheckerPlugin();
TabFocusPlugin();
TablePlugin();
TemplatePlugin();
TextColorPlugin();
TextPatternPlugin();
TocPlugin();
VisualBlocksPlugin();
VisualCharsPlugin();
WordCountPlugin();
ModernTheme();
const cmd = function (command, value?) {
return { command, value };
};
const commands = [
cmd('Bold'),
cmd('Italic'),
cmd('Underline'),
cmd('Strikethrough'),
cmd('Superscript'),
cmd('Subscript'),
cmd('Cut'),
cmd('Copy'),
cmd('Paste'),
cmd('Unlink'),
cmd('JustifyLeft'),
cmd('JustifyCenter'),
cmd('JustifyRight'),
cmd('JustifyFull'),
cmd('JustifyNone'),
cmd('InsertUnorderedList'),
cmd('InsertOrderedList'),
cmd('ForeColor', 'red'),
cmd('HiliteColor', 'green'),
cmd('FontName', 'Arial'),
cmd('FontSize', 7),
cmd('RemoveFormat'),
cmd('mceBlockQuote'),
cmd('FormatBlock', 'h1'),
cmd('mceInsertContent', 'abc'),
cmd('mceToggleFormat', 'bold'),
cmd('mceSetContent', 'abc'),
cmd('Indent'),
cmd('Outdent'),
cmd('InsertHorizontalRule'),
cmd('mceToggleVisualAid'),
cmd('mceInsertLink', 'url'),
cmd('selectAll'),
cmd('delete'),
cmd('mceNewDocument'),
cmd('Undo'),
cmd('Redo'),
cmd('mceAutoResize'),
cmd('mceShowCharmap'),
cmd('mceCodeEditor'),
cmd('mceDirectionLTR'),
cmd('mceDirectionRTL'),
cmd('mceFullPageProperties'),
cmd('mceFullscreen'),
cmd('mceImage'),
cmd('mceInsertDate'),
cmd('mceInsertTime'),
cmd('InsertDefinitionList'),
cmd('mceNonBreaking'),
cmd('mcePageBreak'),
cmd('mcePreview'),
cmd('mcePrint'),
cmd('mceSave'),
cmd('SearchReplace'),
cmd('mceSpellcheck'),
cmd('mceInsertTemplate', '{$user}'),
cmd('mceVisualBlocks'),
cmd('mceVisualChars'),
cmd('mceMedia'),
cmd('mceAnchor'),
cmd('mceTableSplitCells'),
cmd('mceTableMergeCells'),
cmd('mceTableInsertRowBefore'),
cmd('mceTableInsertRowAfter'),
cmd('mceTableInsertColBefore'),
cmd('mceTableInsertColAfter'),
cmd('mceTableDeleteCol'),
cmd('mceTableDeleteRow'),
cmd('mceTableCutRow'),
cmd('mceTableCopyRow'),
cmd('mceTablePasteRowBefore'),
cmd('mceTablePasteRowAfter'),
cmd('mceTableDelete'),
cmd('mceInsertTable'),
cmd('mceTableProps'),
cmd('mceTableRowProps'),
cmd('mceTableCellProps'),
cmd('mceEditImage')
];
Arr.each(commands, function (cmd) {
const btn = document.createElement('button');
btn.innerHTML = cmd.command;
btn.onclick = function () {
EditorManager.activeEditor.execCommand(cmd.command, false, cmd.value);
};
document.querySelector('#ephox-ui').appendChild(btn);
});
EditorManager.init({
skin_url: '../../../../js/tinymce/skins/lightgray',
selector: 'textarea.tinymce',
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern codesample'
],
theme: 'modern',
toolbar1: 'bold italic',
menubar: false
});
}