사이냅 에디터 문서
Space shortcuts
Page tree

Versions Compared

Old Version 47

changes.mady.by.user 김혜진

Saved on

compared with

New Version 48

changes.mady.by.user 허지영

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

적용된 모습설정


Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
// 즐겨찾기 카테고리에 커스텀 메뉴 추가
'aiWriteSupporter.config': {
    categoryConfig: {
        favorites: ['my-custom-menu1', 'my-custom-menu2', 'my-custom-menu3']
    },
    customPrompts: [
        {
        	key: 'my-custom-menu1',
        	type: 'prompt',
      		label: {
      	    	ko: '나의 커스텀 메뉴 1',
            	en: 'My custom menu'
        	},
        	prompt: {
            	ko: '바나나를 영어로',
            	en: 'banana in english',
        	}
    	}, 
        {
            key: 'my-custom-menu2',
        	type: 'immediately',
        	label: {
            	ko: '나의 커스텀 메뉴 2',
            	en: 'My custom menu'
        	},
        	prompt: {
            	ko: '포도를 영어로',
            	en: 'grape in english',
        	}
    	},
		{
        	key: 'my-custom-menu3',
        	type: 'group',
        	label: {
            	ko: '내가 제일 자주쓰는 메뉴 모음',
            	en: 'My most used menu'
        	},
        	items: ['englishTranslation', 'tabularFormat']
    	}
    ]
}

...

생성형 이미지 AI를 연동해 자동으로 이미지를 생성하여 콘텐츠 생성을 지원하도록 했습니다.

Image Removed

툴바에 버튼 추가하기

AI에게 글 작성을 요청하는 버튼을 툴바 영역, 벌룬, 바로 삽입, 메뉴 영역에 추가할 수 있습니다.

툴바에 추가 

Image Removed

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
//...
'editor.toolbar': [
	// AI 요청하기 버튼
    'openTextAI',
	// AI 이미지 요청하기 버튼
    'openImageAI',
    // ...
],
// ...

바로 삽입에 추가

Image Removed

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
//...
'editor.quickInsert': [
	// AI 요청하기 버튼
    'openTextAI',
	// AI 이미지 요청하기 버튼
    'openImageAI',
    // ...
],
// ...

config 설정

AI 글 작성 도우미 플러그인을 3.0.0 버전 이상에서 사용하려면 아래와 같이 설정해 주셔야 합니다.

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
// URL과 API Key를 설정하는 경우
'aiWriteSupporter.config': {
	text: {
		url: 'https://api.openai.com/v1/chat/completions',
		apiKey: 'sk-abc123...456xyz', // 브라우저에 노출되므로 안전하지 않음
		//...
	},
	image: {
		url: 'https://api.openai.com/v1/images/generations',
		apiKey: 'sk-abc123...456xyz', // 브라우저에 노출되므로 안전하지 않음
		//...
	}
}

// URL만 설정하는 경우
'aiWriteSupporter.config': {
	text: {
		url: '/request',
		//...
	},
	image: {
		url: '/request',
		//...
	}
}

추가로 사용 가능한 키

...

text: {width: 380, height: 260}

image: {width: 300, height: 340}

...

  • 프롬프트 및 미리보기 창 기본 사이즈를 설정합니다. (단위: px)
  • 최소 사이즈 이하로 설정 시 최소 사이즈로 표현됩니다.
    • 최소 사이즈
      • text: {width: 370, height: 120}
      • image: {width: 230, height: 120}

프롬프트 및 미리보기 창 기본 사이즈 설정

텍스트 생성 AI, 이미지 생성 AI 각각 사이즈를 설정해야 합니다.

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js

'aiWriteSupporter.config': {
	text: {
		url: '/request',
		areaSize: { width: 400, height: 400 }
		//...
	},
	image: {
		url: '/request',
		areaSize: { width: 320, height: 360 }
		//...
	}
}