angular5 使用 ueditor （实用）

ゝ一纸荒年。 2023-07-04 14:29 33阅读 0赞

原文出处：[https://www.cnblogs.com/guofan/p/10065138.html][https_www.cnblogs.com_guofan_p_10065138.html] （做个备忘，建议阅读原文）

项目中新功能需要用到富文本编辑，查找了几个富文本编辑器，结合需求以及以后产品说的可能扩展，最终选择了ueditor

首先就是功能超多，一步到位，估计都不用二次开发就够用了：

![format_png][]

使用的话，首先要装包：

![format_png 1][]（`npm install ngx-ueditor --save`）

然后就是引入到模块，然后配置前端配置项：

![format_png 2][]

![format_png 3][]

这是目录结构（没有在根目录引入，就为了写demo）：

![format_png 4][]

接着就是这个 ueditor 这个文件夹，需要去对应地址去下载：[ https://ueditor.baidu.com/website/download.html][https_ueditor.baidu.com_website_download.html]   ，引用配置就完成了。

这时候如果想看demo，可以直接打开demo.html，就能直接看见了效果了，没有demo.html 的话，就自己创建一个，放在如上图路径下：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>ueditor demo</title>
    </head>
    <body>
    
    <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
    
    <script type="text/javascript" src="ueditor.config.js"></script>
    
    <script type="text/javascript" src="ueditor.all.js"></script>
    
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
    </body>
    </html>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

然后是使用配置（创建一个组件，在html界面中直接引用）：

![format_png 5][]

ts 文件中使用创建相应变量及设置配置，如果不传配置的话，会默认使用：ueditor.config.js 文件：

![format_png 6][]

在模块中引入该组件，ng serve 启动项目，就能看到配置好的功能啦：

![format_png 7][]

ueditor 有很多个api，可以直接获取到带html的编辑器中输入的全部内容，可以直接使用相应方法来解析带html 标签的字符串。我这里使用的是 \[innerHtml\] ，但innerHtml 不能解析元素的内联样式，于是乎，用管道：

![format_png 8][]

页面解析时：

![format_png 9][]

最终实践代码（服务是没用到的）：

![format_png 10][]

u-editor.component.html：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<div class="ueditor-box">
      <ueditor [(ngModel)]="full_source" [config]="ueditor_config" (onReady)="onReady($event)" #full></ueditor>
    
      <div class="btn-group">
        <pre class="show-message">{
      {showMessage}}</pre>
        <div [innerHTML]="showMessage | html" class="final-display"></div>
        <h2>语言转换</h2>
        <hr/>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="languageChange($event, 'zh-cn')">
          <span>zh-cn</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="languageChange($event, 'en')">
          <span>en</span>
        </button>
        <hr/>
        <h2>常用API</h2>
        <hr/>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setContent($event)">
          <span>写入内容</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setContent($event, true)">
          <span>追加内容</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="insertContent($event)">
          <span>光标处插入给定的内容</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="insertImage($event)">
          <span>插入图片</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="hasContents($event)">
          <span>判断是否有内容</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="getAllHtml($event)">
          <span>获得整个html的内容</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="getContent($event)">
          <span>获得内容(带html标签)</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="getContentTxt($event)">
          <span>获得纯文本</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="getPlainTxt($event)">
          <span>获得带格式的纯文本(能获得但显示需处理)</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="getText($event)">
          <span>获得当前选中的文本(暂时有问题)</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="onfocus($event)">
          <span>使编辑器获得焦点</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="onblur($event)">
          <span>使编辑器失去焦点</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="isOnFocus($event)">
          <span>判断编辑器是否有焦点</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setEnabled($event)">
          <span>编辑器可以编辑</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setDisabled($event)">
          <span>编辑器不可编辑</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setHide($event)">
          <span>隐藏编辑器</span>
        </button>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setShow($event)">
          <span>显示编辑器</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="setHeight($event)">
          <span>设置编辑器的高度为300</span>
        </button>
        <br>
        <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
                (click)="clearDoc($event)">
          <span>清空文档</span>
        </button>
      </div>
    </div>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

u-editor.component.scss

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

.ueditor-box {
      padding: 20px;
      overflow: auto;
      height: 100%;
    
      .btn-group {
        button {
          margin-right: 10px;
          margin-bottom: 10px;
        }
        .show-message {
          margin: 10px 0;
          border: 1px solid #ccc;
          height: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
    
        .final-display {
          font-size: 16px;
          color: #000;
          font-family: initial;
        }
      }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

u-editor.component.ts

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
    import { AppService } from '../../../app.service';
    import { UEditorDemoService } from './u-editor.service';
    import { UEditorComponent } from 'ngx-ueditor';
    
    /**
     * @description 富文本编辑测试组件
     */
    @Component({
      selector: 'app-u-editor',
      templateUrl: './u-editor.component.html',
      styleUrls: [ './u-editor.component.scss' ]
    })
    export class UEditorDemoComponent implements OnInit {
      @ViewChild('full') full: UEditorComponent;
    
      public sign = 'u_editor';
    
      // 展示api获取到的数据
      public showMessage;
    
      public full_source;
    
      // 配置信息
      public ueditor_config = {
        toolbars: [
          [
            'FullScreen', // 全屏
            'bold', // 加粗
            'italic', // 斜体
            'underline', // 下划线
            '|',
            'forecolor',  // 字体颜色
            'backcolor',  // 背景色
            'fontfamily', // 字体
            'fontsize', // 字号
            '|',
            'insertorderedlist',  // 有序列表
            'insertunorderedlist',  // 无序列表
            '|',
            'justifyleft',  // 左对齐
            'justifycenter',  // 居中对齐
            'justifyright', // 右对齐
            'justifyjustify', // 两端对齐
            '|',
            'link', // 超链接
            'unlink', // 取消链接
            'inserttable', // 插入表格
            '|',
            'simpleupload', // 单图上传
          ]
        ],
        autoClearinitialContent: true,  // 自动清除初始内容
        wordCount: true, // 文字计数
        focus: false, // 初始化后获得焦点
        initialFrameHeight: 200, // 设置高度
        initialFrameWidth: '100%', // 设置宽度
        enableDragUpload: true, // 启用拖放上传
        enablePasteUpload: true, // 启用粘贴上传
        imageScaleEnabled: true, // 启用图片拉伸缩放
        autoHeightEnabled: true, // 自动高度
      };
    
      constructor (private uEditorDemoService: UEditorDemoService,
                   private appService: AppService,
                   private elementRef: ElementRef) {
      }
    
      ngOnInit () {
      }
    
      // ueditor 加载完成
      onReady ($event) {
        // 字体大小及颜色，通过class设置默认：16px、#000
      }
    
      // 切换语言触发方法
      languageChange ($event, language) {
        this.full.setLanguage(language);
      }
    
      // 获取全部html内容
      getAllHtml () {
        this.showMessage = this.full.Instance.getAllHtml();
      }
    
      // 获得文本，带html标签
      getContent () {
        this.showMessage = this.full.Instance.getContent();
        // 设置img标签的垂直对齐为底部对齐
        setTimeout(() => {
          const imgs = document.getElementsByTagName('img');
          for (let i = 0; i < imgs.length; i++) {
            imgs[ i ].style.verticalAlign = 'initial';
          }
        });
      }
    
      // 获取纯文本
      getContentTxt () {
        this.showMessage = this.full.Instance.getContentTxt();
      }
    
      /**
       * 写入/追加内容
       * @param { Object } $event 事件对象
       * @param { boolean } type 是否是追加，true：追加；false，直接更新内容
       */
      setContent ($event, type) {
        this.showMessage = type ? '追加文本' : '添加文本';
        this.full.Instance.setContent('<h3>一段文本</h3>', type);
      }
    
      // 获取带格式的文本
      getPlainTxt () {
        this.showMessage = this.full.Instance.getPlainTxt();
        console.log(this.showMessage);
      }
    
      // 判断编辑器是否有内容
      hasContents () {
        this.showMessage = this.full.Instance.hasContents() ? '有内容' : '无内容';
      }
    
      // 编辑器获得焦点
      onfocus () {
        this.full.Instance.focus();
        this.showMessage = '获得焦点';
      }
    
      // 编辑器失去焦点
      onblur () {
        this.full.Instance.blur();
        this.showMessage = '失去焦点';
      }
    
      // 编辑器是否有焦点
      isOnFocus () {
        this.showMessage = this.full.Instance.isFocus() ? '有焦点' : '无焦点';
      }
    
      // 设置当前区域不可编辑
      setDisabled () {
        this.full.Instance.setDisabled();
        this.showMessage = '当前区域不可编辑';
      }
    
      // 设置当前区域可编辑
      setEnabled () {
        this.full.Instance.setEnabled();
        this.showMessage = '当前区域可编辑';
      }
    
      // 隐藏编辑器
      setHide () {
        this.full.Instance.setHide();
        this.showMessage = '隐藏编辑器';
      }
    
      // 显示编辑器
      setShow () {
        this.full.Instance.setShow();
        this.showMessage = '显示编辑器';
      }
    
      // 获取当前选中文本
      getText () {
        this.showMessage = this.full.Instance.selection.getText();
        console.log(this.full.Instance.selection);
        console.log(this.full.Instance.selection.getText());
      }
    
      // 在光标出插入内容
      insertContent () {
        this.full.Instance.execCommand('inserthtml', '<span>插入一段文本</span>');
      }
    
      // 设置高度方法
      setHeight ($event) {
        this.full.Instance.setHeight(300);
      }
    
      // 清空文档
      clearDoc () {
        this.full.Instance.execCommand('cleardoc');
      }
    
      // 插入图片
      insertImage () {
        this.full.Instance.execCommand('insertimage', {
          src: '../assets/image/a.jpeg',
          width: '100',
          height: '100',
        });
        // 第二个参数：{} / [{},{}]
      }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

html-pipe.ts

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    
    /**
     * @description 解决 [innerHtml] 解析html标签字符串 不解析内联样式问题，用管道处理
     */
    @Pipe({
      name: 'html'
    })
    export class HtmlPipe implements PipeTransform {
      constructor (private sanitizer: DomSanitizer) {
      }
    
      transform (style) {
        return this.sanitizer.bypassSecurityTrustHtml(style);
      }
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

好啦，就先这些，如果要用到各种上传什么的，则需要配置后端服务。。。

引一下git：[https://github.com/cipchk/ngx-ueditor][https_github.com_cipchk_ngx-ueditor]

官网：[http://fex.baidu.com/ueditor/\#start-config][http_fex.baidu.com_ueditor_start-config]

还有一个 ngx-umeditor 的： [https://github.com/cipchk/ngx-umeditor ][https_github.com_cipchk_ngx-umeditor] 也可以看看，感觉像是优化版？

[https_www.cnblogs.com_guofan_p_10065138.html]: https://www.cnblogs.com/guofan/p/10065138.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2MjUyNDk3My0xMDcwNjc0MzYxLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2Mjg0MTQ1OC0xNzE3NTIwMTMzLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2Mjk0NjgyNi0xNDg2NzI3ODUzLnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2MzAyOTIyMC0xMjAzMjkxNzA2LnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2MzE0MzI2Ni05MTM5Njc4NzUucG5n?x-oss-process=image/format,png
[https_ueditor.baidu.com_website_download.html]: https://ueditor.baidu.com/website/download.html
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2MzkxMTE1Mi0xNDg5NjkwOTUucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2NDA0OTkyMi0xODc4NzU4NTEzLnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2NDQzNzQwOC0xMDI3MjY3NDc0LnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2NDc0MDY3My0xMDE5NDA4MzE4LnBuZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2NDgxMTA2OS01OTM5OTM4NzEucG5n?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTEyMjAxNy8yMDE4MTIvMTEyMjAxNy0yMDE4MTIwNDE2NDk1NDA0MS0xODkyMDA0MTg2LnBuZw?x-oss-process=image/format,png
[https_github.com_cipchk_ngx-ueditor]: https://github.com/cipchk/ngx-ueditor
[http_fex.baidu.com_ueditor_start-config]: http://fex.baidu.com/ueditor/#start-config
[https_github.com_cipchk_ngx-umeditor]: https://github.com/cipchk/ngx-umeditor