Angular中集成富文本编辑器插件—KindEditor

sun2829191346

已于 2023-06-14 15:17:44 修改

阅读量615

点赞数 1

分类专栏：前端文章标签： angular.js javascript 前端

于 2023-04-19 15:32:09 首次发布

本文链接：https://blog.csdn.net/sun2829191346/article/details/130244878

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了如何在Angular15项目中集成KindEditor富文本编辑器，包括下载编辑器、部署到assets文件夹、创建HTML页面以及在组件中使用iframe嵌入。同时，文章详细讲解了通过postMessage方法实现父页面与子页面间的数据传递。

摘要由CSDN通过智能技术生成

使用框架版本：Angular15+

1、下载编辑器KindEditor

下载地址

2、部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件复制到assets文件夹下
在这里插入图片描述
您可以根据需求删除以下目录。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3、添加HTML页面

在 assets\kindeditor\ 下添加html文件
在这里插入图片描述
文件代码如下：

<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
  <!-- 富文本编辑器 -->
  <link rel="stylesheet" href="./kindeditor-utils/themes/default/default.css" />
  <link rel="stylesheet" href="./kindeditor-utils/plugins/code/prettify.css" />
  <script charset="utf-8" src="./kindeditor-utils/kindeditor-all.js"></script>
  <script charset="utf-8" src="./kindeditor-utils/lang/zh-CN.js"></script>
  <script charset="utf-8" src="./kindeditor-utils/plugins/code/prettify.js"></script>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
    // 关闭过滤模式，保留所有标签
    KindEditor.options.filterMode = false;
    var editor;
    KindEditor.ready(function (K) {
      editor = K.create('textarea[name="content"]', {
        allowFileManager: true
      });
    });
    //接收父页面传过来的数据
    window.addEventListener('message', function (event) {
      if (event.data === 'addOredit') {
        //把数据传递给父页面
        editor.sync();
        html = document.getElementById('editor_id').value; // jQuery
        window.parent.postMessage(html, '*');
      } else {
        // 设置HTML内容
        editor.html(event.data);
      }
    }, false);
  </script>
</head>

<body style="height: 100%; margin: 0">
  <textarea id="editor_id" name="content" style="width:100%;height:400px;visibility:hidden;"></textarea>
</body>

</html>

4、在需要富文本编辑器的组件中使用iframe嵌入html文件

.html文件：

<div style="height: 400px;">
    <iframe height="100%" width="100%" frameborder="no" allowfullscreen="true" id='iframeId' name="iframeName" [src]="this.slideUrl"></iframe>
</div>
<button nz-button nzType="primary" [disabled]="!validateForm.valid"(click)="submitForm()">提交</button>

.ts文件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-my-editor',
  templateUrl: './my-editor.component.html',
  styleUrls: ['./my-editor.component.less']
})
export class MyEditorComponent implements OnInit {

  fileUrl = 'assets/kindeditor/kindeditor.html';
  slideUrl!: SafeResourceUrl;
  validateForm!: FormGroup;
  content: any;
  
  constructor(private sanitizer: DomSanitizer, private fb: FormBuilder) { }

  ngOnInit(): void {
    this.slideUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.fileUrl);
  }
  
  ngOnDestroy() {
    window.removeEventListener('message', this.treatmentContents);//移除监听事件
  }

  //处理iframe嵌套页面之间的数据传递
  iframeData() {
    const that = this;
    //传递数据到子页面
    var iframe = (document?.querySelector('#iframeId') as HTMLIFrameElement);
    iframe.contentWindow?.postMessage('addOredit', that.slideUrl);
    //接受子页面传递过来的数据
    window.addEventListener('message', this.treatmentContents, false);
  }

  treatmentContents = (event) => {
    this.content = event.data;
  }
  
  //详情
  Detail() {
  //调后台接口取到想要传递到子页面的数据
  
     //传递数据到子页面
     const that = this;
     var iframe = (document?.querySelector('#iframeId') as HTMLIFrameElement);
     iframe.onload = function () {
     	iframe.contentWindow?.postMessage(re.xx.xxx, that.slideUrl);
     }
  }
  submitForm() {
  //调接口添加或修改之前需要处理一下数据
    this.iframeData();
  }

}