"vue-quill-editor"： "^ 3.0.6"、インストールの依存関係
<テンプレート>
<div class = "contPage">
<div class = "contentPage">
<div class = "container">
<div class = "containerTitle" style = "cursor：pointer;" @ click = "back">
<i class = "el-icon-back"> </ i>
{ {$ route.query.row？ 'ホームページのお知らせを編集'： 'ホームページのお知らせを追加'}}
</ div>
<el-form：model = "ruleForm"：rules = "rules" ref = "ruleForm" label-width = "100px" class = "demo-ruleForm">
<el-form-item label = "Activity Property">
<el-select v-model = "ruleForm.region" placeholder = "選択择物业">
<el-option label = "選択择物业" value = "shanghai"> </ el-option>
<el-option label = "Dongyue Garden Property" value = "beijing"> </ el-option>
</ el-select>
</ el-form-item>
<el-form-item label = "¸题">
<el-input v-model = "ruleForm.address"> </ el-input>
</ el-form-item>
<el-form-item label = "Content">
<quill-editor ref = "myTextEditor" v-model = "content"：options = "editorOption"> </ quill-editor>
</ el-form-item>
<el-form-item label = "すべての地区を選択するかどうか" label-width = "120">
<el-radio-group v-model = "ruleForm.resource">
<el-radio label = "是"> </ el-radio>
<el-radio label = "否"> </ el-radio>
</ el-radio-group>
</ el-form-item>
<el-form-item>
<el-button type = "primary" @ click = "submitForm（）">提交</ el-button>
</ el-form-item>
</ el-form>
</ div>
</ div>
</ div>
</ template>
<スクリプト>
import'quill / dist / quill.core.css ';
import'quill / dist / quill.snow.css ';
import'quill / dist / quill.bubble.css ';
import {quillEditor} from'vue-quill-editor ';
「../../mock/pageManagement」から{tableDataNotice}をインポートします
デフォルトのエクスポート{
名前： '編集者'、
データ：関数（）{
戻り値{
コンテンツ： ''、
editorOption：{
プレースホルダー：「HelloWorld」
}、
ruleForm：{
住所： ""、
名前： ''、
地域： ''、
タイプ：[]、
資源： ''、
}、
ルール：{
名前： [
{必須：true、メッセージ： 'イベント名を入力してください'、トリガー： 'ぼかし'}、
{最小：3、最大：5、メッセージ：「長さ3〜5文字」、トリガー：「ぼかし」}
]、
リージョン：[{必須：true、メッセージ： 'アクティブなリージョンを選択してください'、トリガー： '変更'}]、
リソース：[{必須：true、メッセージ： 'アクティビティリソースを選択してください'、トリガー： '変更'}]、
}
};
}、
コンポーネント：{
quillEditor
}、
Mounted（）{
let flag = this。$ route.query.flag;
if（flag == '編集'）{
this.ruleForm = this。$ route.query.row;
}
}、
メソッド：{
back（）{
this。$ router.go（-1）;
}、
onEditorChange（{editor、html、text}）{
this.content = html;
}、
参加する（） {
console.log（this.content）;
this。$ message.success（ '正常に送信されました！'）;
}、
submitForm（）{
this.ruleForm.id = tableDataNotice.length +1;
tableDataNotice.push（this.ruleForm）;
this。$ router.push（ "/ notify"）;
}
}
};
</ script>
<スタイルスコープ>
.contPage {
パディング：20px;
}
.editor-btn {
マージントップ：20px;
}
。コンテンツページ {
幅：100％;
高さ：600px;
オーバーフロー-y：スクロール;
}
.containerTitle {
ボックスサイズ：border-box;
マージン：20px;
border-bottom：1px solid＃f1f1f1;
パディング-下：20px;
}
</ style>