Я реализовал пользовательскую комбинацию в CKEditor4. Назначение комбо - выбрать токен из комбо, и значение будет вставлено в редактор. ниже приведен код
HTML
<div class="md-form form-sm mt-0">
<ckeditor *ngIf="showEditor" id="emailEditor" formControlName="message" [config]="config" ></ckeditor>
</div>
TS
public returnEditorConfig() {
return {
uiColor: '#ffffff',
on: {
pluginsLoaded: ($event: any) => {
let editor = $event.editor;
let config = editor.config;
let Base = this;
// editor.config4
editor.ui.addRichCombo('tokens', {
label: "Insert Tokens",
title: "Insert Tokens",
voiceLabel: "Insert Tokens",
className: 'cke_format',
multiSelect: false,
width: '100%',
// extraPlugins: 'placeholder',
// toolbar: 'basicstyles,0',
panel: {
css: [CKEDITOR.skin.getPath('editor')].concat(config.contentsCss),
multiSelect: false,
attributes: { 'aria-label': 'Custom Feilds' }
},
init: function () {
Base.emailTokens.forEach(tok => {
this.startGroup((tok.key).toUpperCase());
tok.items.forEach(item => {
this.add(item.expression, item.title);
});
});
},
onClick: (value) => {
editor.focus();
editor.fire('saveSnapshot');
editor.insertHtml(value);
// let writer = new CKEDITOR.htmlWriter();
// writer.openTag('button');
// writer.attribute('class', 'MyClass');
// writer.openTagClose('button');
// writer.text(value);
// writer.closeTag('button');
editor.fire('saveSnapshot');
}
});
}
},
toolbar: [
{ name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'document', groups: ['mode', 'document', 'doctools'], items: ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'] },
{ name: 'tools', items: ['UIColor', 'Maximize', 'ShowBlocks'] },
'/',
{ name: 'editing', groups: ['find', 'selection'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'tokens', items: ['tokens'] },
{ name: 'others', items: ['-'] }],
toolbarCanCollapse: false,
resize_enabled: false,
height: 500
};}
значение токена равно [[SenderName]]
. Мое требование - заблокировать значение токена, я имею в виду сделать его недоступным для редактирования, и если
Backspace
, весь токен следует удалить вместо удаления одного символазначения токена. Я пробовал несколько вещей, таких как заполнитель и виджет, но я не смог правильно его реализовать.
Кто-нибудь, пожалуйста ??? Заранее спасибо.