зеркало из https://github.com/nextcloud/text.git
docs: Add notes about the component integration to the readme
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Родитель
1d7cc110ea
Коммит
e5b881dc48
53
README.md
53
README.md
|
@ -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()
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
Загрузка…
Ссылка в новой задаче