角为6的SimpleMDE获得构件编辑器的参考
角为6的SimpleMDE获得构件编辑器的参考
提问于 2018-09-21 22:53:30
到目前为止我做了什么？
我已经在我的SimpleMDE 6应用程序中成功地实现了它，它工作得很好。然而，我很难在我的组件中获得编辑器的参考。
我想要什么
我想在组件的函数中访问simplemde编辑器，这样我就可以调用它的方法来显示我从服务响应中得到的标记。
有什么问题吗？
我是个新手，不知道如何在模块初始化的组件中获得引用。下面是我的代码，以更好地解释它：
按照这一链接：
https://www.npmjs.com/package/ng2-simplemde
我的模块
import { NgModule } from '@angular/core'
import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde'
@NgModule({
imports: [
SimplemdeModule.forRoot({
provide: SIMPLEMDE_CONFIG,
// config options 1
useValue: {}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }我的组件.ts
export class QuestionComponent implements OnInit, OnDestroy {
option2 = {placeholder: '# Welcome!! show your talent here.',
promptURLs: true,
renderingConfig: {codeSyntaxHighlighting: true},
showIcons: ['code', 'table'],
toolbar: [
'bold',
'italic',
'heading',
'code',
'quote',
'unordered-list',
'ordered-list',
{
name: 'custom',
action: function showit(editor) {
this.demo.customFunction(editor, this.demo);
} ,
className: 'fa fa-picture-o',
title: 'Custom Button',
demo : this.vm
},
'table',
'link',
'horizontal-rule',
'preview',
'side-by-side',
'fullscreen',
'guide',
'|', // Separator
]};
constructor() {}
//some other methods
}我的组件.html
<div class="row">
<div class="col-md-6"><simplemde *ngIf="questions" [(ngModel)]="something" [options]="option2"></simplemde></div>
</div>到目前一切尚好。但是，我需要处理以前保存在组件中的标记，如下所示：
converttohtml(){
// call some serrvice and get reponse
this.oldhtml = this.simplemde.options.previewRender(response.markdown);
} 我不知道如何在这个方法中获得this.simplemde。有什么帮助吗？
注意:我不想创建一个自定义工具栏按钮的simplemde。我需要做这件事来回应一个休息电话。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-22 00:09:35
您可以通过几种方式获得对组件的引用。
一种方法是使用@ViewChild和组件类型。另一种方法是使用@ViewChild和一个模板变量。
如果要使用模板变量，请将一个添加到模板中，如下所示(在simplemde标记中添加了#simplemde )。
<simplemde #simplemde [options]="option2"></simplemde>这是托管组件的TS代码：
import { Component, ViewChild } from '@angular/core';
import { Simplemde } from 'ng2-simplemde';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Try this
@ViewChild(Simplemde) simplemde: Simplemde; // @ViewChild and component type
// OR this
@ViewChild('simplemde') simplemde: Simplemde; // @ViewChild and template variable
option2 = {};
// then you can refer the component like you want
convertToHtml(){
// call some service and get reponse
this.oldhtml = this.simplemde.options.previewRender(response.markdown);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52451911
复制相关文章
相似问题
腾讯云开发者
