天天看點

React中如何內建添加wangeditor富文本編輯器

constructor(props) {
    super(props);
    this.editorElem = React.createRef();
}
           

react 中 初始化 wangeditor 

componentDidMount() {
    this.initWangEditor();
}
           

配置wangeditor 

initWangEditor() {
    const elem = this.editorElem.current;
    const editor = new E(elem);
    this.editor = editor;
    editor.customConfig.menus = [
      'head', // 标題
      'bold', // 粗體
      'fontSize', // 字号
      // 'fontName', // 字型
      'italic', // 斜體
      'underline', // 下劃線
      'strikeThrough', // 删除線
      'foreColor', // 文字顔色
      // 'backColor', // 背景顔色
      // 'link', // 插傳入連結接
      'list', // 清單
      'justify', // 對齊方式
      'quote', // 引用
      // 'emoticon', // 表情
      'image', // 插入圖檔
      // 'table', // 表格
      // 'video', // 插入視訊
      // 'code', // 插入代碼
      'undo', // 撤銷
      'redo', // 重複
    ];
    editor.create();
  }
           

 如何設定及讀取wangeditor編輯内的圖文内容:

// 讀取文章内容
this.editor.txt.html();

// 設定文章内容
this.editor.txt.html('文章内容')
           

繼續閱讀