README

为yii2的ckeditor5小部件

安装

安装此扩展的首选方法是通过 composer。

或者

"nigabrein/yii2-ckeditor5-widget": "*"

在 composer.json 文件的 require 部分插入以下内容

使用方法

您需要 下载 或将现有的 ckeditor.js 文件添加到 AppAsset.php 文件的 js 部分。

路径

use nigabrein\ckeditor5\CKEditor;

小部件1

<?= $form->field($model, 'text')->widget(CKEditor::className(), 
   [
       'options' => ['id' => 'text-editor-id-you'],
       'toolbar' => [
          'SourceEditing', 
          '|', 'undo', 'redo',
          '|', 'heading',
          '|', 'bold', 'italic',
          '|', 'alignment:left', 'alignment:right', 'alignment:center',
          '|', 'link', 'uploadImage', 'blockQuote', 'insertTable',
          '|', 'bulletedList', 'numberedList',
          '|', 'removeFormat',
       ],
       //'value' => 'Text',
   ]
); ?>

小部件2

<?= $form->field($model_create, 'name')->widget(CKEditor::className(), 
   [
       'toolbar' => [
          'bold', 'italic','link','removeFormat',
       ],
   ]
); ?>

功能

'uploadUrl' => 'site/upload', //this will be the url where you want to ckeditor send the post request with file data

'uploadUrl' => '/someUpload.php',

'value' => 'Text',

'toolbar' => [
   'Sourceediting',
   '|', 'heading', 
   '|',
   'bold', 
   'italic', 
   'link',
   'bulletedList',
   'numberedList',
   'blockQuote',
   '|',
   'indent',
   'outdent',
   '|',
   'imageUpload',
   'insertTable',
   'mediaEmbed',
   'undo',
   'redo',
   'exportPdf',
   'exportWord',
   'fontSize',
   'fontFamily',
   'fontColor',
   'fontBackgroundColor',
   'highlight',
   'imageInsert',
   'alignment',
   'alignment:left', 
   'alignment:right', 
   'alignment:center',
   'code',
   'removeFormat'
]

其他

<?= $form->field($model, 'content')->widget(CKEditor::className(),[
   'clientOptions' => [
      'language' => 'en',
      'uploadUrl' => 'upload',   //url for upload files
      'uploadField' => 'image',  //field name in the upload form
   ]
]); ?>

bootstrap5 和 ckeditor5 样式冲突 - 如果 ckeditor5 字段位于 bootstrap5 的模态窗口中，则 ckeditor5 的 'link' 功能将无法工作。解决方案

document.addEventListener("DOMContentLoaded", function() {
  var button = document.querySelector('button[crutch-ckeditor-btn="true"]');
  
  if (button) {
    button.addEventListener("click", function() {
        
      var element = document.querySelector('.ck-body-wrapper');
      if(element){
        //element.style.position = 'fixed';
        //element.style.zIndex = 1060;
          
        var modal = document.querySelector('div[crutch-ckeditor-modal="true"]');
        if(modal){
            modal.appendChild(element);
        }
      }
    });
  }
});

//crutch-ckeditor-btn="true" параметр на кнопку с модальным окном с ckeditor

//crutch-ckeditor-modal="true" параметр на модальное окно с ckeditor

或者

function CrutChckeditorModal(type, my_id_modal_create, my_id_modal_update){
    if(type === 'create'){
        var ckBodyWrapper = document.createElement('div');
        ckBodyWrapper.classList.add('ck-body-wrapper');
        ckBodyWrapper.style.zIndex = "1060";
        document.body.appendChild(ckBodyWrapper);
        
        // Находим модальное окно
        var myModal_create = new bootstrap.Modal(document.getElementById(my_id_modal_create));

        // Отключаем FocusTrap при открытии модального окна
        myModal_create._element.addEventListener('shown.bs.modal', function () {
          myModal_create._focustrap.deactivate();
        });
        
        var myModal_update = new bootstrap.Modal(document.getElementById(my_id_modal_update));

        myModal_update._element.addEventListener('shown.bs.modal', function () {
          myModal_update._focustrap.deactivate();
        });
    }
        
    if(type === 'update'){
        var element = document.querySelector('.ck-body-wrapper');
        if(element){
            element.innerHTML = '';
        }
    }
}

为了从 ckeditor5 字段中移除徽标，需要隐藏 ck-powered-by

.ck.ck-powered-by a {
    display: none !important;
}