mavonEditorのダウンロードmavonEditorソースコードのダウンロード

Mavoneditor

Vue2
Vue3

英語の文書

jsfiddleのデモ

例（画像ディスプレイ）

PC

写真をもっと見るには、ここをクリックしてください...

Mavon-Editor（インストール）をインストールする

 $ npm install mavon-editor --save

使用（紹介方法）

index.js ：

    // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue . use ( mavonEditor )
    new Vue ( {
        'el' : '#main' ,
        data ( ) {
            return { value : '' }
        }
    } )

index.html

 < div id =" main " >
    < mavon-editor v-model =" value " />
</ div >

nuxt.jsで使用する方法

まず、Project DirectoryプラグインでVue-Mavon-Editor.jsを作成します

 import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

次に、nuxt.config.jsにプラグイン構成を追加します

  plugins : [
  ...
    { src : '@/plugins/vue-mavon-editor' , ssr : false }
  ] ,

最後のステップは、ページまたはコンポーネントに紹介することです

< template >
  < div class = " mavonEditor " >
    < no-ssr >
      < mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
    </ no-ssr >
  </ div >
</ template >
< script >
export default {
  data () {
    return {
      markdownOption : {
        bold : true , // 粗体
        ... // 更多配置
      },
      handbook : " #### how to use mavonEditor in nuxt.js "
    };
  }
};
</ script >

< style scoped>
.mavonEditor {
  width : 100 % ;
  height : 100 % ;
}
</ style >

詳細な方法については、ここをクリックしてください...

マークダウンイットオブジェクトを取得して設定する方法...

APIドキュメント

小道具

名前名	タイプタイプ	デフォルトのデフォルト値	説明を説明してください
価値	弦		初期値
言語	弦	Zh-cn	言語の選択、一時的にZH-CNをサポート：単純化された中国語、ZH-TW：口頭中国語、EN：英語、FR：フランス語、PT-BR：ポルトガル語、RU：ロシア語、DE：ドイツ語：JA：日本
fontsize	弦	14px	領域のテキストサイズを編集します
Scrollstyle	ブール	真実	スクロールバースタイルをオンにします（当面はクロムのみをサポートします）
ボックスシャドウ	ブール	真実	ボーダーシャドウをオンにします
BoxShadowStyle	弦	0 2px 12px 0 rgba（0、0、0、0.1）	ボーダーシャドウスタイル
遷移	ブール	真実	トランジションアニメーションを有効にするかどうか
ツールバーバックグラウンド	弦	#ffffff	ツールバーの背景色
プレビューバックグラウンド	弦	#FBFBFB	プレビューボックスの背景色
サブフィールド	ブール	真実	TRUE：ダブル列（同じ画面のプレビューの編集）、false：単一列（プレビュー分割画面の編集）
DefaultOpen	弦		デフォルトの表示領域は、単一の列（ `subfield=false` ）のときに表示されます。編集：編集領域はデフォルトで表示されます。プレビュー：デフォルトの表示プレビュー領域その他=編集
プレースホルダー	弦	編集を開始...	入力ボックスが空のときのデフォルトのプロンプトテキスト
編集可能	ブール	真実	編集を許可するかどうか
コードスタイル	弦	code-github	マークダウンスタイル：デフォルトのgithub、オプションの配色
ToolbarsFlag	ブール	真実	ツールバーが表示されるかどうか
ナビゲーション	ブール	間違い	デフォルトの表示ディレクトリ
ショートカット	ブール	真実	ショートカットキーを有効にするかどうか
オートフォーカス	ブール	真実	テキストボックスへの自動フォーカス
ishljs	ブール	真実	ハイライトされたコード
ImageFilter	関数	ヌル	画像フィルタリング関数には`File Object`パラメーターがあり、 `Boolean`を返す必要があります。 `true` 、ファイルが合法であることを意味し、 `false`ファイルが違法であることを意味します。
ImageClick	関数	ヌル	画像クリックイベント、デフォルトはプレビューで、オーバーライドできます
Tabsize	番号	t	デフォルトは tです
HTML	ブール	真実	HTMLタグを有効にします。このタグは、歴史的な理由により常にデフォルトになりましたが、HTMLタグを使用せずに閉じることをお勧めします。セキュリティの問題を完全に排除できます。
XSSOPTIONS	物体	{}	デフォルトで有効になっているXSSルール構成は、falseを設定してオフにします。有効になった後、HTMLタグがフィルタリングされ、すべてのHTMLタグ属性がデフォルトでフィルタリングされます。攻撃される可能性を減らすために、オンデマンドでホワイトリストに設定することをお勧めします。 - カスタムルールリファレンス：https：//jsxss.com/zh/options.html - リファレンスデモ：dev-demo
ツールバー	物体	次の例	ツールバー

ツールバー

すべてのデフォルトのツールバーボタンが有効になり、カスタムオブジェクトが渡されます。いくつかのボタンを有効にすることを選択できます。

 /*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold : true , // 粗体
    italic : true , // 斜体
    header : true , // 标题
    underline : true , // 下划线
    strikethrough : true , // 中划线
    mark : true , // 标记
    superscript : true , // 上角标
    subscript : true , // 下角标
    quote : true , // 引用
    ol : true , // 有序列表
    ul : true , // 无序列表
    link : true , // 链接
    imagelink : true , // 图片链接
    code : true , // code
    table : true , // 表格
    fullscreen : true , // 全屏编辑
    readmodel : true , // 沉浸式阅读
    htmlcode : true , // 展示html源码
    help : true , // 帮助
    /* 1.3.5 */
    undo : true , // 上一步
    redo : true , // 下一步
    trash : true , // 清空
    save : true , // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation : true , // 导航目录
    /* 2.1.8 */
    alignleft : true , // 左对齐
    aligncenter : true , // 居中
    alignright : true , // 右对齐
    /* 2.2.1 */
    subfield : true , // 单双栏模式
    preview : true , // 预览
}

[ツールバーの追加]ボタンをカスタマイズする必要がある場合は、次の方法を使用できます

 < mavon-editor >
  <!-- 左工具栏前加入自定义按钮 -->
  < template slot = "left-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 左工具栏后加入自定义按钮  -->
  < template slot = "left-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏前加入自定义按钮  -->
  < template slot = "right-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏后加入自定义按钮  -->
  < template slot = "right-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
</ mavon-editor >

イベントイベントバインディング

名前メソッド名	パラメーターパラメーター	説明を説明してください
変化	文字列：値、文字列：レンダリング	編集領域で変更されるコールバックイベント（Reender：Markdownによる解析後の結果を値）
保存	文字列：値、文字列：レンダリング	ctrl + sのコールバックイベント（キーを保存してコールバックもトリガーします）
全画面表示	ブール：ステータス、文字列：値	フルスクリーン編集用のコールバックイベントを切り替えます（ブール：状態のフルスクリーン）
readmodel	ブール：ステータス、文字列：値	没入型読み取りのコールバックイベントを切り替える（boolean：読み取りが有効になる）
htmlcode	ブール：ステータス、文字列：値	HTMLソースコードのコールバックイベントを確認します（Boolean：ソースコードが有効になっています）
subfieldtoggle	ブール：ステータス、文字列：値	シングル列とダブル列の編集のコールバックイベントを切り替えます（boolean：double列のオープンステータス）
previewtoggle	ブール：ステータス、文字列：値	プレビュー編集されたコールバックイベントを切り替える（boolean：プレビューオープンステータス）
helptoggle	ブール：ステータス、文字列：値	ヘルプコールバックイベントを表示します（boolean：ヘルプが有効になります）
NavigationToggle	ブール：ステータス、文字列：値	ナビゲーションディレクトリのコールバックイベントを切り替えます（boolean：ナビゲーションが有効になります）
imgadd	番号：pos、file：imgfile	コールバックイベントを画像ファイルに追加します（POS：リスト内の画像の場所、ファイル：ファイルオブジェクト）
imgdel	配列（2）：[number：pos、file：imgfile]	画像ファイル削除コールバックイベント（配列（2）：2つの要素の配列、最初の位置はリスト内の画像の位置、2番目の位置はファイルオブジェクトです）

ハイライトされたコード

ハイライトコードを強調表示する必要がない場合は、iShljsをfalseに設定する必要があります

コードをオンにして、プロップを強調表示します

<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>

プラグインボリュームを最適化するために、次のファイルはv2.4.2からデフォルトでcdnjs外部リンクを使用します。

highlight.js
github-markdown-css
katex （ v2.4.7 ）

highlight.jsとコードのハイライトスタイルでファイルを解析する言語の強調表示スタイルは、使用するとオンデマンドでロードされます。 github-markdown-cssとkatex 、 mounted時にのみロードされます

注意：オプションの配色とサポートされている言語は、highlight.js/9.12.0からエクスポートされます

CDNを使用せずに、ローカルロードオンデマンドをここをクリックしてください...

画像アップロード

< template >
    < mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export default {
    methods : {
        // 绑定@imgAdd event
        $imgAdd (pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData ();
           formdata . append ( ' image ' , $file);
           axios ({
               url : ' server url ' ,
               method : ' post ' ,
               data : formdata,
               headers : { ' Content-Type ' : ' multipart/form-data ' },
           }). then (( url ) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm . $img2Url (pos, url);
           })
        }
    }
}
</ script >

写真のアップロードの詳細については、ここをクリックしてください...

注記

デフォルトのサイズスタイルは、最小高さ：300px、min-width：300pxで、それ自体で上書きできます。
基本Z-Index：1500
ディスプレイとしてのみ使用される可能性がありますプロップ：toolbarsflag：false、subfield：false、defaultopen： "preview"

ショートカットキー

鍵	キーコード	関数
F8	119	ナビゲーションをオン/オフにします
F9	120	トグルをプレビュー/編集します
F10	121	フル画面をオン/オフします
F11	122	読み取りモードをオン/オフします
F12	123	シングルカラム/ダブルカラムスイッチング
タブ	9	インデント
Ctrl + s	17 + 83	保存をトリガーします
Ctrl + d	17 + 68	選択した行を削除します
Ctrl + z	17 + 90	前の
Ctrl + y	17 + 89	次のステップ
Ctrl +ブレークスペース	17 + 8	クリア編集
Ctrl + b	17 + 66	大胆な
Ctrl + i	17 + 73	斜体
Ctrl + h	17 + 72	＃タイトル
Ctrl + 1	17 + 97または49	＃タイトル
Ctrl + 2	17 + 98または50	＃＃タイトル
Ctrl + 3	17 + 99または51	＃＃＃タイトル
Ctrl + 4	17 + 100または52	＃＃＃＃タイトル
Ctrl + 5	17 + 101または53	＃＃＃＃＃タイトル
Ctrl + 6	17 + 102または54	＃＃＃＃＃＃タイトル
Ctrl + u	17 + 85	++ unscore ++
Ctrl + m	17 + 77	== tag ==
Ctrl + q	17 + 81	>引用
Ctrl + o	17 + 79	1。注文リスト
Ctrl + l	17 + 76	[リンクタイトル]（リンクアドレス）
ctrl + alt + s	17 + 18 + 83	^上隅マーク^
ctrl + alt + u	17 + 18 + 85	- 順序付けられていないリスト
Ctrl + alt + c	17 + 18 + 67	``コードブロック
Ctrl + alt + l	17 + 18 + 76	！[画像タイトル]（画像リンク）
ctrl + alt + t	17 + 18 + 84	シート
Ctrl + Shift + s	17 + 16 + 83	~~下隅マーク~~
Ctrl + Shift + d	17 + 16 + 68	~~ミドルマーキング~~
Ctrl + Shift + c	17 + 16 + 67	中心
Ctrl + Shift + L	17 + 16 + 76	左に
Ctrl + Shift + r	17 + 16 + 82	右側に
シフト +タブ	16 + 9	インデントをキャンセルします

依存関係

Markdown-It
自動テクステア

マークダウン構文拡張

絵文字
添字
上付き文字
容器
定義リスト
略語
脚注
入れる
マーク
TODOリスト
ハイライト
ケイトックス
画像プレビュー
TOC

その他の構文プラグインは、Markdown-ITオブジェクトを取得することで導入できます。その他の構文プラグインは、Markdown-ITオブジェクトを取得することで導入できます。

更新（コンテンツの更新）

ログを更新します

協力者

チェンキェン
ygj6
Yukaige

ライセンス（証明書）

Mavoneditorはオープンソースであり、MITライセンスの下でリリースされます。

拡大する

mavonEditor

Mavoneditor

英語の文書

例（画像ディスプレイ）

PC

Mavon-Editor（インストール）をインストールする

使用（紹介方法）

nuxt.jsで使用する方法

APIドキュメント

小道具

ツールバー

イベントイベントバインディング

ハイライトされたコード

画像アップロード

注記

ショートカットキー

依存関係

マークダウン構文拡張

更新（コンテンツの更新）

協力者

ライセンス（証明書）

blocksuite

KindEditor HTMLオンラインエディター

Asai オンライン HTML エディター

ExmayCMS コンテンツ管理システム

外国のビデオチャットのソースコード

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTMLオンラインエディター

Asai オンライン HTML エディター

Google Dorks

shepherd

mongo express