angular5 使用 ueditor-白红宇

angular5 使用 ueditor

阅读量：4978 次

发布时间：2019-06-12

本文共 6616 字，大约阅读时间需要 22 分钟。

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

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

　　使用的话，首先要装包：

（npm install ngx-ueditor --save）

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

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

　　接着就是这个 ueditor 这个文件夹，需要去对应地址去下载：，引用配置就完成了。

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

    
         ueditor demo

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

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

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

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

　　页面解析时：

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

　　u-editor.component.html：


       
        
          
       {
   {showMessage}}
    
       
    
       语言转换
    
       
    
           
           
       
    
       常用API

u-editor.component.scss

.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;    }  }}

　　u-editor.component.ts

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('一段文本
', 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', '插入一段文本');  }  // 设置高度方法  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',    });    // 第二个参数：{} / [{},{}]  }}

　　html-pipe.ts

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);  }}

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

　　引一下git：

　　官网：

　　还有一个 ngx-umeditor 的：也可以看看，感觉像是优化版？

转载于:https://www.cnblogs.com/guofan/p/10065138.html

你可能感兴趣的文章