README

安装方法

• 首先，您必须下载 ckeditor4

• 现在，您可以在您的 header html 标签中添加此行 <script src="{$publicPath}/ckeditor/ckeditor.js"></script>

• 在 vendor 目录中打开 text-editor/Config/config.neon.dist 并将其粘贴到您的配置目录中

• 在 Presenter 或 Control 中注册 TextEditorFactory

    /**
     * @var TextEditorFactory @inject
     */
    public $textEditorFactory;
  

• TextEditor 可以在表单控件中使用

    $formField = $this->textEditorFactory->createFormCkField('TextBlockFactory.content');
  $form->addComponent($formField, 'content');
  

• 要创建新的编辑器类型，请创建此示例类

use Bajzany\TextEditor\IType;
use Bundles\TextBlock\Entity\TextBlock;
use Bundles\User\Entity\Role;
use Chomenko\AutoInstall\AutoInstall;
use Chomenko\AutoInstall\Config\Tag;
use Bajzany\TextEditor\EditorManager;
use Nette\Security\User;

/**
 * @Tag({EditorManager::TAG_TYPE=CkEditorClassic::BLOCK_NAME})
 */
class CkEditorClassic implements AutoInstall, IType
{
	const BLOCK_NAME = 'CoreTextBlockInline';

	public function saveContent(string $content, array $args = [])
	{
		
	}

	/**
	 * @param array $args
	 * @return string
	 */
	public function loadData(array $args = []): string
	{
		
	}

	/**
	 * @return bool
	 */
	public function hasPermission(): bool
	{
		
	}
}

• 现在重要的是 const BLOCK_NAME，此名称必须设置到 js className 中

  在此配置中，首先调用 configure()，然后调用 bind()。editorType: 'classic or inline'

import {Config, Wrapped} from 'textEditor';
import {validateUrl} from 'Stage';

export class CoreTextBlockInline extends Config {

	getEditorType() {
		return 'inline';
	}

	bind(editor, item, type) {
		
		editor.on('focus', function() {$("#ckeoptions").show();});
		editor.on('blur', function() {$("#ckeoptions").hide();});
		editor.setKeystroke([
			[ window.CKEDITOR.CTRL + 83, 'save' ],
		]);
        
		editor.addCommand( 'save',
			{
				modes : { wysiwyg:1, source:1 },
				exec : function( editor ) {
					const url = item.getAttribute('data-link');
					const type = item.getAttribute('data-type');
					const args = item.getAttribute('data-args');
					const url_string = validateUrl(url);
					const UrlObject = new URL(url_string);
					$.ajax({
						type: 'POST',
						url: UrlObject.toString(),
						data: {
							content: editor.getData(),
							type: type,
							args: args,
						},
					});
				}
			}
		);
		editor.ui.addButton( 'Save',{label : 'Uložit',command : 'save'});
	}
	configure() {
		return {
			sharedSpaces: {
				top: 'ckeoptions',
			}
		};
	}
}

Wrapped.addConfig('CoreTextBlockInline', CoreTextBlockInline);

使用 npm @nettpack/core 包加载 js 文件。

流程

• 要包含此 json 文件，必须在 composer.json 中使用此配置

{
.......
.......
 "extra": {
    "nettpack": {
      "resolve": {
        "customName": "./src/Assets/main.js"
      }
    }
  }
}

• main.js 文件... 配置路径。

export * from './CoreTextBlockInline'

• 现在，您可以将它插入到 webpack 构建中的 /app/ModuleName/Assets/app.js

if (module.hot) {
	module.hot.accept();
}
import {App} from "Stage";

function importAll (r) {
	r.keys().forEach(r);
}
importAll(require.context('../', true, /\.(js|css|less|png|gif)$/));

//...............
//...............
//...............
// YOUR PACKAGE NAME
import "customName";
//...............
//...............
//...............

$(document).ready(function () {
	App.run();
});

在 .latte 中调用此新类型，第一个参数是类型名称，最后一个参数是数组，包含 loadData(array $args = []) 和 saveContent(string $content, array $args = []) 函数

{control ckEditor, Bundles\TextBlock\Model\CkEditorClassic::BLOCK_NAME, ['name' => $textBlock->getName()]}