wangEditor富文本编辑器制作新闻通知

官网地址：https://www.wangeditor.com/

使用

首先引入js

<script type="text/javascript" src="/js/wangEditor/wangEditor.min.js" > </script>

CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js
推荐还是把js下载到本地引入，因为他没有css 文件 只有js文件。下载到本地修改css样式方便。

创建一个富文本编辑器容器

<div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

初始化编辑器

<script type="text/javascript">
    //初始化富文本编辑器
    const E = window.wangEditor
    const editor = new E('#content')
    // 设置编辑区域高度为 500px
    editor.config.height = 500
    // 配置菜单栏，删减菜单，调整顺序
    editor.config.menus = [
    ]
    // 配置全屏功能按钮是否展示
    editor.config.showFullScreen = false

    editor.create()
    //禁用编辑器之后，内容只读，不可编辑。
    editor.disable()
</script>

css样式，修改编辑区的背景颜色：

	<style>
        .w-e-text-container {
            background-color: #efefef;
        }
    </style>

最终的效果就是，去掉菜单栏，只剩下编辑区的一个不可编辑的通知