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 >

더 많은 소개 방법을 보려면 여기를 클릭하십시오 ...

Markdown-it 객체를 얻고 설정하는 방법 ...

API 문서

소품

이름 이름	유형 유형	기본 기본값	설명을 설명하십시오
값	끈		초기 가치
언어	끈	ZH-CN	언어 선택, 일시적으로 ZH-CN : 단순화 된 중국어, ZH-TW : Oral Chinese, EN : 영어, FR : 프랑스어, PT-BR : 포르투갈어, RU : 러시아어, DE : 독일어, JA : 일본어
글꼴 크기	끈	14px	영역 텍스트 크기 편집
스크롤 스타일	부울	진실	Scrollbar 스타일을 켜십시오 (당분간 크롬 만 지원)
Boxshadow	부울	진실	테두리 그림자를 켜십시오
Boxshadowstyle	끈	0 2px 12px 0 RGBA (0, 0, 0, 0.1)	국경 그림자 스타일
이행	부울	진실	전환 애니메이션 활성화 여부
툴바 백	끈	#ffffff	도구 모음 배경색
미리보기 백	끈	#FBFBFB	미리보기 상자 배경색
서브 필드	부울	진실	true : 이중 열 (이중 열 (미리보기 편집), False : 단일 열 (편집 미리보기 분할 화면)
기본 요법	끈		기본 디스플레이 영역은 단일 열 ( `subfield=false` )에서 표시됩니다. 편집 : 편집 영역은 기본적으로 표시됩니다. 미리보기 : 기본 디스플레이 미리보기 영역 기타 = 편집
자리 표시 자	끈	편집 시작 ...	기본 프롬프트 텍스트 입력 상자가 비어있을 때
편집 가능한	부울	진실	편집 허용 여부
코드 스타일	끈	코드 github	마크 다운 스타일 : 기본 github, 선택적 색 구성표
툴바 플래그	부울	진실	도구 모음이 표시되는지 여부
항해	부울	거짓	기본 디스플레이 디렉토리
지름길	부울	진실	바로 가기 키를 활성화할지 여부
자동 초점	부울	진실	텍스트 상자에 자동 초점
ishljs	부울	진실	강조된 코드
ImageFilter	기능	널	이미지 필터링 함수에는 `File Object` 매개 변수가있어 `Boolean` 을 반환해야합니다. `true` 는 파일이 합법적이고 `false` 파일이 불법임을 의미합니다.
imageclick	기능	널	이미지 클릭 이벤트, 기본값은 미리보기를 재정의 할 수 있습니다
탭 크기	숫자	티	기본값은 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의 콜백 이벤트 (키를 저장하고 콜백을 트리거)
전체 화면	부울 : 상태, 문자열 : 값	전체 화면 편집을위한 콜백 이벤트 토글 (부울 : 상태 전체)
레디 모드	부울 : 상태, 문자열 : 값	몰입 형 독서의 콜백 이벤트 토글 (부울 : 읽기가 활성화 됨)
htmlcode	부울 : 상태, 문자열 : 값	HTML 소스 코드의 콜백 이벤트 확인 (부울 : 소스 코드가 활성화 됨)
서브 필드 토글	부울 : 상태, 문자열 : 값	단일 및 이중 열 편집의 콜백 이벤트 전환 (부울 : 이중 열 오픈 상태)
미리보기 Toggle	부울 : 상태, 문자열 : 값	미리보기 편집 된 콜백 이벤트 토글 (Boolean : Preview Open Status)
헬프 토글	부울 : 상태, 문자열 : 값	도움말 콜백 이벤트보기 (부울 : 도움말이 활성화 됨)
NavigationToggle	부울 : 상태, 문자열 : 값	Navigation Directory의 콜백 이벤트 전환 (Boolean : Navigation이 활성화 됨)
Imgadd	번호 : POS, 파일 : imgfile	이미지 파일에 콜백 이벤트 추가 (POS : 목록에서 이미지의 위치, 파일 : 파일 개체)
Imgdel	배열 (2) : [번호 : POS, 파일 : imgfile]	이미지 파일 삭제 콜백 이벤트 (Array (2) : 두 요소 배열, 첫 번째 위치는 목록의 이미지 위치이고 두 번째 위치는 파일 객체입니다)

강조된 코드

하이라이트 코드를 강조 표시 할 필요가 없다면 ISHLJS를 False로 설정해야합니다.

코드 하이라이트 소품을 켜십시오

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

플러그인 볼륨을 최적화하기 위해 다음 파일은 v2.4.2 의 기본적으로 cdnjs 외부 링크를 사용합니다.

highlight.js
github-markdown-css
katex ( v2.4.7 )

CODE highlight.js 의 언어 구문 분석 파일 및 코드 강조 표시 스타일은 사용될 때 주문시로드됩니다. github-markdown-css 및 katex mounted 때만로드됩니다

통지 : 옵션 색 구성표 및 지원되는 언어는 하이라이트에서 내보내립니다 .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 >

사진 업로드에 대한 자세한 내용은 여기를 클릭하십시오 ...

메모

기본 크기 스타일은 Min-Height : 300px, min-width : 300px입니다.
기본 Z- 안수 : 1500
디스플레이로만 사용되는 소품으로 만 사용될 수 있습니다. 툴바 플래그 : 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	오른쪽에
Shift + 탭	16 + 9	들여 쓰기를 취소하십시오

의존성

Markdown-it
Auto-TextArea

마크 다운 구문 확장

이모티콘
첨자
어깨 기호
컨테이너
정의 목록
약어
각주
끼워 넣다
표시
TODO 목록
가장 밝은 부분
케이트 렉스
이미지 미리보기
TOC

다른 구문 플러그인은 Markdown-IT 객체를 얻어 도입 할 수 있습니다. 다른 구문 플러그인은 Markdown-IT 객체를 얻어 도입 할 수 있습니다.

업데이트 (업데이트 콘텐츠)

로그 업데이트

공동 작업자

첸 첸
ygj6
유카이기

라이센스 (인증서)

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