zoukankan      html  css  js  c++  java
  • wangEditor富文本编辑器使用

    官网链接 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

    由于使用公司封装的富文本编辑器不太好使(小声bb),摸索了一个好用的富文本编辑器

    npm install wangeditor --save

    在componentDidMount中声明使用

        const elemMenu = document.getElementById('editorElemMenu');
        const elemBody = document.getElementById('editorElemBody');
        const editor = new Editor(elemMenu, elemBody);
        (editor as any).config.zIndex = 0;
        // 使用 onchange 函数监听内容的变化,并实时更新到 state 中
        editor.config.onchange = () => {
          const kmContent = editor.txt.html();
          const kmContentText = editor.txt.text();
        };
        editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
        ];
        editor.config.uploadImgShowBase64 = true;
        editor.create();

    在组件中使用

                    <div
                      id="editorElemMenu"
                      style={{ backgroundColor: '#f1f1f1', border: '1px solid #ccc' }}
                      className="editorElemMenu"
                    />
                    <div
                      style={{
                        height: 270,
                        border: '1px solid #ccc',
                        borderTop: 'none',
                      }}
                      id="editorElemBody"
                      className="editorElem-body"
                    />
  • 相关阅读:
    成功连上数据库顿感世界美好许多
    MySQL数据库基本命令
    杭电1004 Let the Balloon Rise
    大数学习笔记
    安卓传感器开发之指南针
    java Class文件内部结构解析
    mysq数据库实战小型管理系统
    JSplitPane分隔线的用法
    swing 菜单+右键菜单+二级菜单实现
    input type=file 上传文件,同一个文件第二次上传无反应
  • 原文地址:https://www.cnblogs.com/fdd-111/p/14754354.html
Copyright © 2011-2022 走看看