浏览代码

Pre-configure the offset of the block toolbar button in the build theme.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
697e38720a

+ 0 - 11
packages/ckeditor5-build-balloon-block/README.md

@@ -66,17 +66,6 @@ BalloonBlockEditor
 
 **Note:** If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in `ckeditor.js`). Read more in the [Advanced setup guide](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html).
 
-**Note:** We recommend to adjust the position of the block toolbar button using CSS (see the example below) to your liking. By default, the block toolbar button will be attached directly to the boundary of the editable content area.
-
-```html
-<style>
-	/* Give the block toolbar button some space, moving it a few pixels away from the editable area. */
-	.ck.ck-block-toolbar-button {
-		transform: translateX( -10px );
-	}
-</style>
-```
-
 **Note:** You can configure the block toolbar items using the {@link module:core/editor/editorconfig~EditorConfig#blockToolbar `config.blockToolbar`} option.
 
 ## License

+ 2 - 0
packages/ckeditor5-build-balloon-block/src/ckeditor.js

@@ -29,6 +29,8 @@ import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefrom
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 
+import '../theme/theme.css';
+
 export default class BalloonBlockEditor extends BalloonEditorBase {}
 
 // Plugins to include in the build.

+ 9 - 0
packages/ckeditor5-build-balloon-block/theme/theme.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Give the block toolbar button some space, moving it a few pixels away from the editable area. */
+.ck.ck-block-toolbar-button {
+	transform: translateX( calc(-1 * var(--ck-spacing-large)) );
+}