Question

我正在使用CKEditor进行项目，我是新手。出于某些原因，我无法使用它的工具栏。所以我必须制作一系列按钮来做造型工作。例如，使用粗体选择的文本：

 CKEDITOR.instances['id-pic-info-edit'].execCommand('bold');

但我无法找到对齐命令（对齐，左，右，中）。

我还安装了＆＃39;证明＆＃39;插件。

这是我的config.js：

   config.toolbar = 'Custom'; //makes all editors use this toolbar
   config.toolbar_Custom = []; //define an empty array or whatever buttons you want.
    // The toolbar groups arrangement, optimized for a single toolbar row.
    config.toolbarGroups = [
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'forms' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'alignment', groups : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
        { name: 'tools' },
        { name: 'others' },
        { name: 'about' }
    ];

    // The default plugins included in the basic setup define some buttons that
    // are not needed in a basic editor. They are removed here.
    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';

    // Dialog windows are also simplified.
    config.removeDialogTabs = 'link:advanced';
    config.allowedContent = 'u em strong ul li;a[href,target,title];span[class];h1 h2 h3 h4';
    config.extraPlugins = 'justify';

Answer 1

首先要做的事情是：

CKEDITOR.instances.yourInstance.commands是您可以浏览可用命令的地方。
justify(block|center|left|right)是您需要知道的命令名称。
CKEDITOR.instances.yourInstance.execCommand( 'justifyright' )是您执行命令的方式。

Justify命令在您选择的上下文中执行，例如对于插入符号（选择）所在的块。您可以使用CKEDITOR.dom.range API在代码中更改选择，以便在任何地方进行调整。

Answer 2

我使用了Oleq答案的信息。一件重要的事情 - 只有在CKEditor工具栏上有相应的按钮时，才能使用对齐命令。

这是jsfiddle，用于快速检查http://jsfiddle.net/Eugene_Ilyin/mo0us7je/

const editor = CKEDITOR.replace('my-editor');

jQuery('#left').click(() => {
  align('left');
});

jQuery('#right').click(() => {
  align('right');
});

function align(align) {
  const range = editor.createRange();
  range.selectNodeContents(editor.editable());
  // Create selection and set range.
  const sel = editor.getSelection();
  sel.selectRanges([range]);
  editor.execCommand('justify' + align);
  // Remove selection.
  sel.removeAllRanges();
}

<script src="https://cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <textarea id="my-editor">
    Lorem ipsum dolor sit amet
    <br /> Lorem ipsum dolor sit amet
    <br /> Lorem ipsum dolor sit amet
    <br /> Lorem ipsum dolor sit amet
    <br /> Lorem ipsum dolor sit amet
  </textarea>
  <button id="left">Align left</button>
  <button id="right">Align right</button>
</body>

CKEditor：以编程方式更改段落对齐方式

2 个答案: