ckeditor5 监听编辑完成
时间: 2023-11-16 19:59:49 浏览: 36
要在 CKEditor 5 中监听编辑完成事件,你可以使用 `editor.model.document.on('change:data')` 方法来监听文档内容的更改。当编辑完成时,该事件将被触发。以下是一个示例代码:
```javascript
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
editor.model.document.on( 'change:data', () => {
console.log( 'Editor content has changed!' );
} );
} )
.catch( error => {
console.error( error );
} );
```
在上面的代码中,当编辑器初始化后,我们使用 `editor.model.document.on('change:data')` 方法来监听文档内容的更改。当文档内容发生更改时,我们将会看到 `Editor content has changed!` 的输出。你可以根据需要编写适当的代码来响应编辑完成事件。
相关问题
ckeditor5获取编辑器所有图片
要获取 CKEditor5 编辑器中的所有图片,可以使用以下步骤:
1. 获取 CKEditor5 编辑器实例,例如:
```javascript
const editorInstance = await ClassicEditor.create(document.querySelector('#editor'));
```
2. 获取编辑器中的所有图片元素,例如:
```javascript
const imageElements = editorInstance.editing.view.domRoot.findAll('img');
```
3. 遍历所有图片元素,获取其 src 属性值即可,例如:
```javascript
const imageSources = [];
for (const imageElement of imageElements) {
const src = imageElement.getAttribute('src');
imageSources.push(src);
}
console.log(imageSources);
```
这样就可以获取 CKEditor5 编辑器中的所有图片的 src 属性值了。
ckeditor5自定义plugin监听dom事件
要在 CKEditor 5 中为自定义插件添加 DOM 事件监听器,可以使用 `editor.editing.view.document.on()` 方法。
以下是一个示例插件,它在编辑器中添加一个自定义按钮,并为该按钮添加了一个点击事件监听器:
```js
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
export default class MyPlugin extends Plugin {
init() {
const editor = this.editor;
const t = editor.t;
// 添加自定义按钮
editor.ui.componentFactory.add( 'myButton', locale => {
const button = new ButtonView( locale );
button.set( {
label: t( 'My Button' ),
icon: '<my-icon></my-icon>',
tooltip: true
} );
// 添加点击事件监听器
button.on( 'execute', () => {
console.log( 'My Button clicked' );
} );
return button;
} );
}
}
```
在上面的示例中,我们使用 `button.on()` 方法为按钮添加了一个 `execute` 事件监听器。当用户单击按钮时,将会在控制台中输出一条消息。
类似地,您可以使用 `editor.editing.view.document.on()` 方法为任何 DOM 元素添加事件监听器。例如,以下代码将为编辑器中的所有段落元素添加一个 `click` 事件监听器:
```js
editor.editing.view.document.on( 'click', ( evt, data ) => {
if ( data.domTarget.nodeName === 'P' ) {
console.log( 'Paragraph clicked:', data.domTarget );
}
} );
```