docs: Add notes about the component integration to the readme

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2023-01-28 11:22:44 +01:00
Родитель 1d7cc110ea
Коммит e5b881dc48
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4C614C6ED2CDE6DF
1 изменённых файлов: 53 добавлений и 0 удалений

Просмотреть файл

@ -57,3 +57,56 @@ Or you might set the `CYPRESS_baseUrl` environment variable for a custom nextclo
- The mime type needs to be known by Nextcloud server (see https://github.com/nextcloud/server/pull/24488 for how this can be added) - The mime type needs to be known by Nextcloud server (see https://github.com/nextcloud/server/pull/24488 for how this can be added)
- Once that is there, please open a pull request to add them to https://github.com/nextcloud/text/blob/12df66ffdd3d71cc696438e2e4ec60fa17b89a64/src/helpers/mime.js#L35-L61 - Once that is there, please open a pull request to add them to https://github.com/nextcloud/text/blob/12df66ffdd3d71cc696438e2e4ec60fa17b89a64/src/helpers/mime.js#L35-L61
- You can test them like other mime types in cypress/e2e/files.spec.js - You can test them like other mime types in cypress/e2e/files.spec.js
## 🛠️ Integrate text in your app
## Load the editor
In order to load the editor in your app, you'll need to dispatch an event.
```php
if (class_exists(LoadEditor::class)) {
$this->eventDispatcher->dispatchTyped(new LoadEditor());
}
```
### Integrate a file editor
Make sure to check if OCA.Text is available as the text app needs to be enabled. You will need to provide an editor fallback on your own in this case.
```
window.OCA.Text.createEditor({
el: document.getElementById('my-editor-div'),
fileId: 12345,
filePath: '/Readme.md',
}).then((editor) => {
// Once ready you can access the editor instance and call methods like:
editor.setContent('new content')
editor.setReadOnly(true)
editor.insertAtCursor('<h1>Heading</h1>')
// Make sure to destory the editor instance once you remove the dom element
editor.destroy()
})
```
### Markdown based content editor
```
window.OCA.Text.createEditor({
el: document.getElementById('my-editor-div'),
content: 'initial content',
}).then((editor) => {
// Once ready you can access the editor instance and call methods like:
editor.setContent('new content')
editor.setReadOnly(true)
editor.insertAtCursor('<h1>Heading</h1>')
// Make sure to destory the editor instance once you remove the dom element
editor.destroy()
})
```