【react】 wangEditor 富文本編輯器 筆記


https://www.kancloud.cn/wangfupeng/wangeditor3/335769 官網

   "wangeditor": "^3.1.1", 版本
1. 黑窗口 cnpm install wangeditor
2.項目中  import E from 'wangeditor';
this.state = {
                editorContent: "<div></div>",
                activeKey: "01",
                arr:[]
            }

  

editorContent 默認顯示空內容
3.創建富文本編輯器 並進行個性化界面功能設置
componentDidMount  組件第一次渲染完成,此時dom節點已經生成,可以在這里調用ajax請求,返回數據setState后組件會重新渲染
    componentDidMount() {
            const elem = this.refs.editorElem
            const editor = new E(elem)
            editor.customConfig.onchange = html => {
                this.setState({
                    editorContent: html
                },()=>{
                })
            }
            editor.customConfig.menus = [
                'head',  // 標題
                'bold',  // 粗體
                'fontSize',  // 字號
                'fontName',  // 字體
                'italic',  // 斜體
                'underline',  // 下划線
                'foreColor',  // 文字顏色
                'list',  // 列表
                'justify',  // 對齊方式
                'quote',  // 引用
                'emoticon',  // 表情
                'undo',  // 撤銷
                'redo'  // 重復
            ]
            editor.create()
            this.editor = editor
            this.getFindDate()
        }

  4.設置文本內容

 this.editor.txt.html(this.state.editorContent)
 this.editor 在構建完富文本后 作為一個變量存儲 可在當前頁面全局訪問到
this.editor.txt.html(內容)
每次設置會觸發 editor.customConfig.onchange
頁面內容即時顯示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM