HTML前端wangEditor富文本编辑器示例jQuery实现

<div class="editor-container">
  <div id="editor">div>
div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script>


<script src="https://cdn.jsdelivr.net/npm/wangeditor@4.6.15/dist/wangEditor.min.js">script>


<script>
  // 初始化 wangEditor
  const editor = new wangEditor('#editor');

  // 配置菜单栏
  editor.config.menus = [
    'head',  // 标题
    'bold',  // 粗体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'quote',  // 引用
    'undo',  // 撤销
    'redo'  // 重复
  ];

  // 创建编辑器
  editor.create();

  // jQuery 代码开始
  $(function() {
    // 绑定事件，当编辑器内容改变时，把内容赋值给 textarea
    editor.txt.change(function() {
      $('#content').val(editor.txt.html());
    });
  });
script>