富文本编辑器的基本使用

Bunury

已于 2024-03-16 21:19:55 修改

阅读量373

点赞数 6

分类专栏： Wangedit 文章标签：前端 javascript 开发语言

于 2024-03-16 21:16:55 首次发布

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136769834

版权

Wangedit 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在网页中使用WangEditor5.1.23构建一个带有工具栏的富文本编辑器，包括配置设置和onChange事件处理。

摘要由CSDN通过智能技术生成

进行导入

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/css/style.min.css">

 <script src="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/index.min.js"></script>

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>

<script>
//const { createEditor, createToolbar } =window.wangEditor
const { createEditor, createToolbar } =wangEditor//这里需要去除window
const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 <textarea>
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig = {}

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})
</script>

<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
</style>