wangEdit(版本3.1.1)之angular

官网参考地址

一、下载wangEdit

npm i wangeditor

二、引入wangEdit

import * as wangEditor from '../../../node_modules/wangeditor/release/wangEditor.js';

三、生成编辑器

//html中
<div id="edit">
    <p>请输入内容...</p>
</div>

//.ts的ngOnInit中
var edit = document.getElementById('edit');
var editor = new wangEditor(edit);
editor.create();

四、实现placeholder

思路：加一个input覆盖在wangEdit上，当wangEdit聚焦时隐藏，失焦时判断富文本中是否有内容，有就隐藏

效果图如下:

代码：

//html
<div style="position:relative">
    <div id="edit"></div>
    <div style="position: 'absolute';left: '15px';top: '40px'">
        <input
        id="place"
        type="text"
        placeholder="请输入内容..."
        style="border: 'none'; background: '#fff'; outline: 'none'; width: '100%'; color: '#ccc',;margin: '0'; height: '20px'"
        >
    </div>
</div>

//.ts 自己在前面定义editor变量
ngOnInit(): void {
    let that=this;
    let edit = document.getElementById('edit');
    this.editor = new wangEditor(edit);
    this.editor.customConfig.onfocus = function () {
      that.dealInp(" ")
    };
    this.editor.customConfig.onblur = function () {
      let text=that.editor.txt.text();
      that.dealInp(text)
    };
    this.editor.create();
}

//placeholder显隐事件
  dealInp(text){
    let place=document.getElementById("place");
    if(text==""){
      place.style.display="block"
    }else{
      place.style.display="none"
    }
  }

遗留问题点：当不聚焦文本框，上传图片或表情或代码等等，插入完成后文本框会自动聚焦，但是不会触发onfocus，会存在placeholder和富文本内容同时存在的场景，所以placeholder建议可以不用设置，csdn发博客的富文本框也没有placeholder

五、富文本内容页面渲染

为了保持wangEdit的原有样式，需要在插入代码地方加class名w-e-text，不然无序列表和插入的代码块没有样式，或者可能还有其他样式问题

innerHTML会丢失样式

所以需要加个html管道处理下

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }

}

<div [innerHTML]="editHtml | html" class='w-e-text'></div>

结果：

六、插入代码高亮显示

上图默认是github风格，可以用highlightjs的dark.css(下载地址),3.0去掉了类型选择

先引入highlightjs里的css文件和js,css种类很多可自选，引入一种就好

  <link rel="stylesheet" href="./assets/dark.css">
  <link rel="stylesheet" href="./assets/highlight.pack.js">

在管道处对html进行处理，就是筛选出code标签然后给它加上对应的class

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import hljs from '../assets/highlight.pack.js'
@Pipe({
  name: "html"
})
export class HtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }
  transform(style) {
    let html=this.parseDom(style);
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

  parseDom(arg) {
    //字符串转dom
    var objE = document.createElement("div");
    objE.innerHTML = arg;
    let blocks = objE.querySelectorAll('pre code');//筛选出code
    blocks.forEach((block) => {
      hljs.highlightBlock(block)
    })//code处塞上对应的class
    return objE.innerHTML;
  };

}

问题来了，高亮有了，为啥不是dask.css里的黑色底，原来是wangEdit.css的样式层级高于dark.css覆盖了,只能自己加css再次覆盖了。

最终效果：