如何从CKEditor获取数据? [英] how to get data from CKEditor?
问题描述
我正在尝试从CKEditor获取数据吗?我正在尝试使用getData函数,但它似乎无法正常工作.
I am trying to get the data from CKEditor? I am trying getData function but it doesnt seem to be working.
下面是HTML
<ckeditor [editor]="Editor" id="Editor" [data]="editorData"></ckeditor>
下面是打字稿
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
public Editor = ClassicEditor;
ClassicEditor.create(document.querySelector('#Editor'), {
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
},
}).then(newEditor => {
this.Editor= newEditor;
}).catch(error => {
console.log(error);
});
如果我尝试使用此方法.Editor.getData()我收到一条错误消息,说getData不是一个函数.
if I try this.Editor.getData() I am getting an error saying getData is not a function.
推荐答案
这是完整路径:
1)如下安装ckEditor:
1) install the ckEditor as below:
npm i ng2-ckeditor --save
2)将ckEditor脚本添加到index.html:
2) Add the ckEditor script in the index.html:
<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
3)将CkEditor模块添加到AppModule中的导入部分,如下所示:
3) Add CkEditor Module to import section in AppModule like the following:
import { CKEditorModule } from 'ng2-ckeditor';
imports:
[
BrowserModule,
FormsModule,
CKEditorModule
],
4)在组件顶部定义以下行
4) Define the following line in the top of the component
import { Component, OnInit } from '@angular/core';
declare var CKEDITOR: any;
5)为您的ckEditor定义一个特定的名称(默认名称为editor1): 在这里我设置内容
5) Define a specific name for your ckEditor (default name is editor1): here I set content
ngOnInit(): void {
CKEDITOR.on('instanceCreated', function (event, data) {
var editor = event.editor,
element = editor.element;
editor.name = "content"
});
}
6)在app.component.html中(添加ckEditor组件和一个按钮以获取数据):
6) in your app.component.html (add a ckEditor component and one button to get data):
<ckeditor #myEditor [(ngModel)]="ckeditorContent" [config]="{uiColor: '#a4a4a4'}" debounce="500"> </ckeditor> <input type="button" value="Get Data" (click)="getData()" />
现在,如果要获取数据,请使用以下命令:
Now, if you want to get data, use the following command:
getData() {
console.log(CKEDITOR.instances.content.getData());
}
演示 (检查浏览器的控制台)
DEMO (check your browser's console)
对于CKEditor Classic :
如果要获取数据,有两种选择:
If you want to get data there are two options:
1) @ViewChild
装饰器
在组件中定义 @Viewchild
:
@ViewChild("myEditor", { static: false }) myEditor: any;
然后在您的HTML中
<ckeditor #myEditor [editor]="editor" [data]="data" [(ngModel)]="data"></ckeditor>
现在,您可以使用以下代码获取数据:
Now, you can get data with the following code :
this.myEditor.data
2)更改事件
在组件中导入以下行:
import { ChangeEvent } from "@ckeditor/ckeditor5-angular/ckeditor.component";
在名为 retrieveddata
的组件中定义一个变量以存储数据
Define a variable in your component named retrieveddata
to store data
retrieveddata: string = null;
将以下方法作为 chagneEvent
public onChange({ editor }: ChangeEvent) {
const data = editor.getData();
this.retrieveddata=data;
}
然后在您的HTML中:
Then in your Html :
<ckeditor [editor]="editor" [data]="data" [(ngModel)]="data" (change)="onChange($event)"></ckeditor>
现在,您的数据存储在 retrieveddata
变量中.控制台以查看.
Now, your data is stored in retrieveddata
variable. console it to see.
演示 (检查浏览器的控制台)
DEMO (check your browser's console)
这篇关于如何从CKEditor获取数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!