Skip to content

Commit 23bfaf3

Browse files
authored
Merge pull request #612 from Laravel-Backpack/remove-ckeditor-and-tinymce-from-docs
Remove ckeditor and tinymce from docs
2 parents 8fc23a1 + 3f34d49 commit 23bfaf3

File tree

1 file changed

+4
-116
lines changed

1 file changed

+4
-116
lines changed

7.x-dev/crud-fields.md

Lines changed: 4 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1236,95 +1236,9 @@ Input preview:
12361236
<hr>
12371237

12381238
<a name="ckeditor"></a>
1239-
### ckeditor <span class="badge badge-pill badge-info">PRO</span>
1239+
### ckeditor
12401240

1241-
Show a wysiwyg CKEditor to the user.
1242-
1243-
```php
1244-
CRUD::field([ // CKEditor
1245-
'name' => 'description',
1246-
'label' => 'Description',
1247-
'type' => 'ckeditor',
1248-
1249-
// optional:
1250-
'custom_build' => [ // check a bit down in this docs on how to work with custom builds
1251-
public_path('assets/js/ckeditor/ckeditor.js'),
1252-
public_path('assets/js/ckeditor/ckeditor-init.js'),
1253-
],
1254-
'extra_plugins' => [],
1255-
'options' => [
1256-
'autoGrow_minHeight' => 200,
1257-
'autoGrow_bottomSpace' => 50,
1258-
'removePlugins' => [],
1259-
],
1260-
1261-
// elfinder configuration options when using [the file manager package](https://github.com/Laravel-Backpack/FileManager)
1262-
// to use this feature you need to be running backpack/pro:2.2.1 or higher and backpack/filemanager:3.0.8 or higher
1263-
'elfinderOptions' => [], // it's the same as `true`, will enable with default options, by default is: `false`
1264-
]);
1265-
```
1266-
1267-
If you'd like to be able to select files from elFinder, you need to install [Backpack/FileManager](https://github.com/Laravel-Backpack/FileManager) package and enable it in your field: `elfinderOptions => true`.
1268-
1269-
#### CKEditor Custom Builds
1270-
1271-
You can create a custom build on the official CKEditor website and use it in your Backpack application. This is useful if you want to have more control over the plugins and features that are included in your CKEditor instance. To use a custom build, you need to follow these steps:
1272-
1273-
**1)** - Go to the [CKEditor Builder](https://ckeditor.com/ckeditor-5/online-builder/) and select the plugins you want to include in your build.
1274-
1275-
**2)** - Place the downloaded ckeditor.js file in your app, for example in `public/assets/js/ckeditor/ckeditor.js`.
1276-
1277-
**3)** - Create a new file, for example `public/assets/js/ckeditor/ckeditor-init.js`, and include the following code:
1278-
1279-
```javascript
1280-
async function bpFieldInitCustomCkeditorElement(element) {
1281-
let myConfig = {
1282-
'language': '{{ app()->getLocale() }}',
1283-
};
1284-
// To create CKEditor 5 classic editor
1285-
let ckeditorInstance = await ClassicEditor.create(element[0], myConfig).catch(error => {
1286-
console.error( error );
1287-
});
1288-
1289-
if (!ckeditorInstance) return;
1290-
1291-
element.on('CrudField:delete', function (e) {
1292-
ckeditorInstance.destroy();
1293-
});
1294-
1295-
// trigger the change event on textarea when ckeditor changes
1296-
ckeditorInstance.editing.view.document.on('layoutChanged', function (e) {
1297-
element.trigger('change');
1298-
});
1299-
1300-
element.on('CrudField:disable', function (e) {
1301-
ckeditorInstance.enableReadOnlyMode('CrudField');
1302-
});
1303-
1304-
element.on('CrudField:enable', function (e) {
1305-
ckeditorInstance.disableReadOnlyMode('CrudField');
1306-
});
1307-
}
1308-
```
1309-
1310-
**4)** - Use the `custom_build` option in your field definition to include the custom build and overwrite the init function:
1311-
1312-
```php
1313-
'custom_build' => [ // check a bit down in this docs on how to work with custom builds
1314-
public_path('assets/js/ckeditor/ckeditor.js'),
1315-
public_path('assets/js/ckeditor/ckeditor-init.js'),
1316-
],
1317-
'attributes' => [
1318-
'data-init-function' => 'bpFieldInitCustomCkeditorElement',
1319-
]
1320-
1321-
```
1322-
1323-
**NOTE**: As you have noticed, using a custom build your initialization script completely overwrites Backpack behavior, for that reason you need to handle all the events and methods that are needed for the field to work properly with Backpack functionality.
1324-
1325-
Input preview:
1326-
1327-
![CRUD Field - ckeditor](https://backpackforlaravel.com/uploads/docs-4-2/fields/ckeditor.png)
1241+
This field is providedy by a third-party integration, you can find instructions on how to install and use it [here](https://github.com/Laravel-Backpack/ckeditor-field).
13281242

13291243
<hr>
13301244

@@ -2665,35 +2579,9 @@ Input preview:
26652579
<hr>
26662580

26672581
<a name="tinymce"></a>
2668-
### tinymce <span class="badge badge-pill badge-info">PRO</span>
2669-
2670-
Show a wysiwyg (TinyMCE) to the user.
2671-
2672-
```php
2673-
CRUD::field([ // TinyMCE
2674-
'name' => 'description',
2675-
'label' => 'Description',
2676-
'type' => 'tinymce',
2677-
// optional overwrite of the configuration array
2678-
// 'options' => [
2679-
//'selector' => 'textarea.tinymce',
2680-
//'skin' => 'dick-light',
2681-
//'plugins' => 'image link media anchor'
2682-
// ],
2683-
]);
2684-
```
2685-
2686-
Input preview:
2687-
2688-
![CRUD Field - tinymce](https://backpackforlaravel.com/uploads/docs-4-2/fields/tinymce.png)
2689-
2690-
**NOTE**: if you want to modify the toolbar buttons (add or remove), here is the default configured toolbar so you can modify it:
2691-
2692-
```php
2693-
'options' => ['toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'],
2694-
```
2582+
### tinymce
26952583

2696-
Some buttons are related to specific plugins and need them to work, please read more about it here: [tiny mce available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/)
2584+
TinyMCE is now provided by a third-party package, you can find instructions on how to use and configure it [here](https://github.com/Laravel-Backpack/tinymce-field).
26972585

26982586
<hr>
26992587

0 commit comments

Comments
 (0)