vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

<div id="div1">
    <p><b>wangEditor</b> リッチ テキスト エディターへようこそ</p>
</div>

<el-button type="primary" @click="createData()">要件の作成</el-button>
<el-button size="mini" @click="createData(index, row, true)">編集</el-button>

import E from 'wangeditor' // プラグインをインポート const editor = null
// または const editor = new E( document.getElementById('div1') )
データ（） {
	戻る {
		ダイアログフォーム: {
	        id: null、
	        部門ID: ''、
	        システム構成ID: ''、
	        タイトル： ''、
	        説明： ''、
	        優先度レベル: ''、
	        ファイルURL: ''
	      },
      },
},
メソッド: {
    初期化エディタ() {
      if (編集者) 戻り
      エディター = 新しい E('#div1')
      // カスタムメニュー構成 editor.config.menus = [
        'head'、// タイトル'bold'、// 太字'fontSize'、// フォント サイズ'fontName'、// フォント'italic'、// 斜体'underline'、// 下線'strikeThrough'、// 取り消し線'foreColor'、// テキストの色'backColor'、// 背景色'link'、// リンクを挿入'list'、// リスト'justify'、// 引用'image'、// 画像を挿入'table'、// 表'code'、// コードを挿入'undo'、// 元に戻す'redo' // 繰り返し]
      editor.config.onchange = (html) => { // エディター内のコンテンツ console.log(html, 'content')
        this.dialogForm.description = html // データで定義された値を割り当てる}

      editor.config.customUploadImg = (files, insert) => { // リッチテキストで画像をアップロード const param = new FormData()
        param.append('ファイル', ファイル[0])
        requireManage.updateOther(param).then((res) => { // 画像をアップロードする interfaceif (res.data) {
            挿入(res.data[0])
          }
        })
      }
      editor.create() // リッチテキストを使用して作成},
    createData( row, edit) { // ディスプレイを作成または編集します this.dialogVisible = true
      this.$nextTick(() => { // フォーカスを取得するには this.$nextTick を使用します this.$refs['dialogForm'].resetFields()
        this.initEditor() // 上に書いたメソッドを呼び出す editor.txt.html('') // リッチテキストの内容をクリアする if (edit) { // 編集中の場合は次のステップに進む this.dialogForm = JSON.parse(JSON.stringify(row)) // エコーされたデータ this.dialogForm.id = row.id
          editor.txt.html(this.dialogForm.description) //エコーされたデータをリッチテキストに挿入します}
      })
    },
 }

<el-行>
	<el-dialog top="50px" :title="titleType == 1 ? '質問を追加' : '質問を編集'" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <div>
        <el-form ref="ダイアログフォーム" :model="ダイアログフォーム" :rules="ダイアログルール" label-width="100px">
          <el-form-item label="部門" prop="部門ID">
            <el-select v-model="dialogForm.departmentId" placeholder="部門を選択してください">
              <el-option v-for="必須の部署のアイテム" :key="item.id" :label="item.departmentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="システムを選択" prop="systemConfigId">
            <el-select v-model="dialogForm.systemConfigId" placeholder="システムを選択してください">
              <el-option v-for="systemArr 内のアイテム" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="タイトル" prop="タイトル">
            <el-input v-model="ダイアログフォーム.title" />
          </el-form-item>
          <el-form-item label="説明" prop="説明">
            <div id="説明" スタイル="幅: 100%" />
          </el-form-item>
          <el-form-item label="優先度レベル" prop="priorityLevel">
            <el-select v-model="dialogForm.priorityLevel" placeholder="優先度レベルを選択してください">
              <el-option label="高" :value="3" />
              <el-option label="中" :value="2" />
              <el-option label="低" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="添付ファイルをアップロード">
            <el-upload アクション="/fms/api/productDev/updateOther" >
              <el-button size="small" type="primary">クリックしてアップロード</el-button>
            </el-アップロード>
          </el-form-item>
        </el-form>
      </div>
      <span slot="フッター" class="ダイアログフッター">
        <el-button type="primary">送信</el-button>
      </span>
    </el-ダイアログ>
 </el-row>