巴子 發表於 2019-5-13 12:39:00

angular集成tinymce

<p>1.前言</p>
<p>&nbsp; &nbsp;&nbsp;我使用的是angular的7.x版本,和之前的低版本集成方式有所区别。这里记录下基本的集成步骤.</p>
<p>2.集成步骤</p>
<p>2.1安装tinymac包</p>
<div class="cnblogs_code">
<pre>npm install tinymce --save</pre>
</div>
<p>2.2在node_modules管理包文件夹下找到tinymce的包,将skins拷贝到项目的assets下 文件夹路径层次为src/assets/skins。src为文件源文件根目录(自定义目录/与node_modules同级)。</p>
<p>2.3创建模块</p>
<div class="cnblogs_code">
<pre>ng g m tiny-<span style="color: rgba(0, 0, 0, 1)">editor //创建模块
ng g c tiny</span>-editor //创建组件</pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TinyEditorComponent} from './tiny-editor.component';

@NgModule({
    declarations: ,
    imports: [
      CommonModule
    ],
    exports:
})
export class TinyEditorModule {
}
</pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import {
    Component,
    AfterViewInit,
    EventEmitter,
    OnDestroy,
    Input,
    Output
} from '@angular/core';

import 'tinymce';

import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import 'tinymce/themes/silver/theme';
declare var tinymce: any;

@Component({
    selector: 'app-tiny-editor',
    template: `&lt;textarea id="{{elementId}}"&gt;&lt;/textarea&gt;`
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();
    editor;

    ngAfterViewInit() {
      tinymce.init({
            selector: '#' + this.elementId,       // id 属性绑定在父组件上
            plugins: ['link', 'table'],
            language: 'zh_CN',
            content_css : '/assets/skins/content/default/content.css',
            skin_url: '/assets/skins/ui/oxide',   // 这里是刚才移动的主题文件
            theme: 'silver',
            branding: false,
            setup: editor =&gt; {
                this.editor = editor;
                editor.on('keyup change', () =&gt; {
                  const content = editor.getContent();
                  this.onEditorContentChange.emit(content);   // 通过keyup change事件将textarea 发送到父组件，可以自定义事件
                });
            }
      });
    }

    ngOnDestroy() {
      tinymce.remove(this.editor);      // 组件移除时销毁编辑器
    }
}
</pre>
</div>
<p>3.页面引用(不要忘了在引用界面的模块中引用富文本的模块)</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;app-tiny-editor
   ="'my-editor'"
   (onEditorContentChange)="keyupHandler($event)"&gt;
&lt;/app-tiny-editor&gt;
</pre>
</div>
<p>4.总结。这是最基本的继承方式,引用音频等媒体请查看官网,引入插件以及相应方法即可。</p><br><br>
来源：https://www.cnblogs.com/ziguiyu/p/10855991.html
頁: [1]
查看完整版本: angular集成tinymce