Как заблокировать токены в CKEditor 4 в Angular - PullRequest
0 голосов
/ 16 октября 2019

Я реализовал пользовательскую комбинацию в 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

, весь токен следует удалить вместо удаления одного символазначения токена. Я пробовал несколько вещей, таких как заполнитель и виджет, но я не смог правильно его реализовать.

Кто-нибудь, пожалуйста ??? Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...