CKEditor 集成

CKEditor 5

要将 CKFinder 与 CKEditor 5 集成，您只需将一些额外的配置选项传递给 CKEditor

ClassicEditor
	.create( document.querySelector( '#editor1' ), {
		ckfinder: {
			uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
		},
		toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
	} )
	.catch( error => {
		console.error( error );
	} );

以下示例演示了集成的结果。尝试将剪贴板中的图像直接粘贴到编辑区域，以及拖放图像 - 文件将由 CKFinder 即时保存。

您可以使用工具栏按钮打开 CKFinder 窗口。然后，您可以管理文件或选择要添加到编辑内容的资产。

有关 CKEditor 5 和 CKFinder 之间集成的详细信息，请参阅 CKFinder 集成 文章，位于 CKEditor 5 文档 中。

CKEditor 4

要 将 CKFinder 与 CKEditor 集成，您只需将一些额外的配置选项传递给 CKEditor

CKEDITOR.replace( 'editor2', {
	filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
	filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
} );

也可以使用 CKFinder.setupCKEditor()，如下所示

var editor = CKEDITOR.replace( 'ckfinder' );
CKFinder.setupCKEditor( editor );

以下示例演示了集成的结果。在 CKEditor 4 内容中创建链接或嵌入图像时，您可以管理和选择服务器上的文件。在现代浏览器中，您还可以尝试将剪贴板中的图像直接粘贴到编辑区域，以及拖放图像 - 文件将由 CKFinder 即时保存。