wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テキスト エディターです。軽量、シンプル、使いやすく、オープン ソースで無料です。 wangEditor ドキュメント: https://www.wangeditor.com/ リッチテキストエディターのスクリーンショット: <!--リッチテキストエディター。 http://www.wangeditor.com/ 使用例: <AppEditor v-model="content"></AppEditor> --> <テンプレート> <article ref="エディター" class="AppEditor-root"></article> </テンプレート> <スクリプト> 定数 E = require('wangeditor'); エクスポートデフォルト{ 名前: 'AppEditor', モデル: { プロパティ: '値'、 イベント: 'update:value', }, 小道具: { // 値、v-model バインディング値: {type: String、default: ''}、 //メニューオプションmenus: { タイプ: 配列、 デフォルト(){ 戻る [ : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : }, }, }, データ(){ 戻る { editor: {}, // エディター object_value: '', // コンテンツのバックアップ、ウォッチ中の判断に使用され、エディターが入力された場合にのみ変更されます}; }, 計算: {}, マウントされた(){ エディタを初期化します。 }, 時計: 値(新しい値、古い値){ // エディタの onchange の変更は処理されず、テキストのロールバックバグを防ぐために親コンポーネントからの変更のみが処理されます (newValue != this._value) の場合 { this.editor.txt.html(新しい値); } }, }, メソッド: { initEditor(){ editor = new E(this.$refs.editor); オブジェクト.assign(editor.customConfig, { メニュー: this.menus、 zインデックス: 100, 高さ: 200, ペーストフィルタースタイル: false、 変更時: (html) => { this._value = html; // _valueを更新 this.$emit('update:value', html); // 値を更新 }, customUploadImg:((ファイル、挿入)=> { if(this.$utils.isEmpty(ファイル)){ 戻る; } const msg = this.$Message.loading({ 内容: 「写真をアップロード中です。しばらくお待ちください...」 期間: 0 }); var パラメータ = 新しい FormData(); パラメータを追加します('img', ファイル[0]); this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => { 挿入(res.data.imgUrl) タイムアウトを設定します(メッセージ、0); this.$Message.success('アップロードに成功しました'); }) })、 アップロード画像フック:{ customInsert: 関数 (insertImg, 結果, エディター) { 挿入画像(結果.url) } } }); エディターを作成します。 editor.txt.html(this.value); // 非同期データ取得のため、すぐにバインドすることはできません。判断を見て処理します。 this.editor = editor; }, }, }; </スクリプト> <スタイル スコープ lang="scss"> .AppEditor-root{ 境界線: 1px solid #f0f0f0; 高さ: 400px !important; /deep/ .we-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important; } /deep/ .we-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important; .we-text{ 高さ: 100%; オーバーフローy: 自動 !important;} } } </スタイル> これで、Vue での wangeditor リッチ テキスト編集の使用に関するこの記事は終了です。より関連性の高い wangeditor リッチ テキスト編集コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: 1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。
目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...
仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...
「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...
3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...
注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...
VMware vSphere は、業界をリードする最も信頼性の高い仮想化プラットフォームです。 v...
Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...
目次序文antd はどのようにしてコンポーネントをカプセル化するのでしょうか?ディバイダーコンポーネ...
目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...
序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...
ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...
<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...
方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...
MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...
目次1. オブジェクトメソッドを定義する2. プロトタイプメソッドを定義する3. イベントコールバッ...