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 キー ペアのバインドを解除します。
皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...
Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...
この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...
Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...
目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...
この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容...
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...
1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放...
非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...
目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...
この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...
目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...
1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...