wangEdit(版本3.1.1)之angular

yolo莹

于 2020-08-19 13:21:17 发布

阅读量678

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_41438582/article/details/108070051

版权

本文介绍了如何在Angular项目中使用wangEdit 3.1.1，从下载到引入，再到生成编辑器和实现placeholder功能。同时，详细讨论了富文本内容页面的渲染和代码高亮显示的实现，包括解决的样式冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网参考地址

一、下载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="positi

最低0.47元/天解锁文章