#위지윅이란?
https://amyish.tistory.com/180
WYSIWYG(위지윅) 에디터란?
WYSIWYG What You See Is What You Get 보는 대로 얻는다 위즈윅, 위지윅, 위즈위그? WYSIWYG이란 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어
amyish.tistory.com
#위지윅 에디터 붙이기 순서
- 여러 가지 위지윅 에디터 중 하나 선택하기
- 셋업 튜토리얼에 따라 위지윅 에디터를 홈페이지에 적용한다.
1. 위지윅 에디터 선택하기
추천받은 에디터는 TinyMCE
The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE
TinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. The rich text editing platform that helped launched Atlassian, Medium, Evernote and more.
www.tiny.cloud
#TinyMCE란?
TinyMCE는 사용자에게 친숙한 인터페이스 내에서 포맷된 콘텐츠를 만들 수 있는 리치 텍스트 편집기입니다.
생성된 출력은 HTML5로 구성에 따라 목록, 테이블 및 기타 유용한 요소를 포함할 수 있습니다. 편집기의 기능은 플러그인 및 사용자 지정을 통해 확장되거나 사용자의 사용 사례에 맞게 제한될 수 있습니다. TinyMCE는 사용자 인터페이스를 사용자 지정하여 응용 프로그램 또는 웹 페이지의 일부처럼 보이고 느끼도록 사용자 지정할 수도 있습니다. TinyMCE는 다양한 프레임워크와 콘텐츠 관리 시스템(CMS)으로 통합될 수 있으며, 다음과 같은 것들이 가능합니다:
- TinyMCE가 항상 최신 버전을 사용하도록 보장하는 Tiny Cloud CDN(콘텐츠 전송 네트워크)에서 로드됩니다.
- 패키지 관리자와 함께 설치됩니다(자체 호스팅됨).
- .zip 파일에서 추출됩니다(자체 호스팅됨).
#What is TinyMCE?
TinyMCE is a rich-text editor that allows users to create formatted content within a user-friendly interface.
The output created is in HTML5 and can include lists, tables, and other useful elements, depending on your configuration. The functionality of the editor can be extended through plugins and customizations, or limited to suit your use-case. TinyMCE can also be customized to look and feel like part of your application or webpage by customizing the user interface. TinyMCE can be integrated into a range of frameworks and Content Management Systems (CMSs), and can be either:
- Loaded from the Tiny Cloud CDN (Content Delivery Network), which will ensure TinyMCE is always using the latest version.
- Installed with a package manager (self-hosted).
- Extracted from a .zip file (self-hosted).
HTML 페이지에 위지윅 에디터 적용하는 법
#Setup
1. HTML 파일에 Bootstrap JS의 소스 스크립트 추가하기
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
2. HTML 페이지의 <Head> 안에 Tiny Cloud에서 TinyMCE 추가에 관한 다음 스크립트 요소 추가하기
<!-- 위지윅 에디터 추가 -->
<script
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
referrerpolicy="origin"
></script>
3. TinyMCE의 초기화 지점 추가하기
여기서 초기화 지점이란 에디터가 어디에 생성이 될 것인가 에디터의 위치를 잡아주는것으로 이해하면 된다.
<!-- TinyMCE 초기화 지점 추가 -->
<div>
<textarea id="tiny">여기에 내용을 입력해주세요.</textarea>
</div>
4. TinyMCE init 스크립트를 추가하기
<!-- TinyMCE init 스크립트 추가 -->
<script>
tinymce.init({
selector: 'textarea#tiny'
});
</script>
여기까지가 셋업 끝!
#세팅 결과
위지윅 에디터 삽입이 잘 된 것을 확인할 수 있다.
우선은 제대로 실행이 되는지 테스트를 위해 실제 리뷰 작성 영역 밖에 만들어뒀는데, 정상 작동하는 것을 확인했으니 이제 에디터 영역이 적용될 페이지를 선택하고(리뷰 등록/수정 페이지) 제대로 적용을 시켜줘야겠다.
#Using TinyMCE in a Bootstrap dialog
부트스트랩 UI 대화상자 내에서 TinyMCE 인스턴스를 렌더링 하려면 다음 코드를 추가한다:
- 호환 버전 : Bootstrap 4 or below
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});이 코드는 부트스트랩이 대화상자 외부 요소의 호출에서 모든 포커스를 차단하기 때문에 필요하다.
(ex) TinyMCE fiddle
https://www.tiny.cloud/docs/tinymce/6/bootstrap-cloud/
Using TinyMCE from the Tiny Cloud CDN with the Bootstrap framework | TinyMCE Documentation
To render TinyMCE instances inside Bootstrap UI dialogs, add the following code: // Prevent Bootstrap dialog from blocking focusin $(document).on('focusin', function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetma
www.tiny.cloud
https://www.tiny.cloud/docs/tinymce/6/basic-setup/
Basic setup | TinyMCE Documentation
There are two menu options: menubar and menu. menubar is used to define the presence and order of menus, such as File, Edit, and View. menu is used to define the presence and order of menu items, such as New Document, Select all, and Source code. Menu and
www.tiny.cloud
'Dev 개발 스터디 (동면 중) > Dev_log+Study 😶🌫️' 카테고리의 다른 글
| Indent Rainbow Palettes (0) | 2023.04.10 |
|---|---|
| 게시판 글 삭제 프로세스 (0) | 2023.04.10 |
| [웹개발/에디터] WYSIWYG(위지윅) 에디터란? (0) | 2023.03.13 |
| [CRUD_게시판 만들기] 05. Update : 글 수정 프로세스 (0) | 2023.03.09 |
| [SQL] UPDATE SET 문 작성하다 DB를 날렸는데.. (0) | 2023.03.06 |