20.12.22 toastui-editor 활용 youtube plugin 추가
2020. 12. 22. 19:29ㆍHTML&CSS&JavaScript
<HTML>
<!--모바일에서도 PC와 같은 비율 유지-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--제이쿼리-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 하이라이트 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css">
<!-- 토스트 UI 에디터, 자바스크립트 코어 -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<!-- 코드 미러 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" />
<!-- 토스트 UI 에디터, CSS 코어 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<!-- 토스트 UI 에디터, 신택스 하이라이트 플러그인 추가 -->
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.js"></script>
<h1>< Editor 1 ></h1>
<section>
<div id="editor-1"></div>
</section>
<h1>에디터 뷰어 1</h1>
<section>
<div id="editor-viewer-1"></div>
</section>
<CSS>
/* 토스트에디터-유튜브 플러그인 시작 */
.toast-ui-youtube-plugin-wrap{
max-width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.toast-ui-youtube-plugin-wrap::before{
content:"";
display:block;
padding-top:calc(100% / 16 * 9);
}
.toast-ui-youtube-plugin-wrap > iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/* 토스트에디터-유튜브 플러그인 끝 */
<JS>
console.clear();
/* 유튜브 함수 시작 */
//유튜브 영상임을 감지하고 공간을 형성하는 함수
function youtubePlugin() {
toastui.Editor.codeBlockManager.setReplacer('youtube', youtubeId => {
// Indentify multiple code blocks
const wrapperId = `yt${Math.random()
.toString(36)
.substr(2, 10)}`;
// Avoid sanitizing iframe tag
setTimeout(renderYoutube.bind(null, wrapperId, youtubeId), 0);
return `<div id="${wrapperId}"></div>`;
});
}
//유튜브 영상 렌더링 함수
function renderYoutube(wrapperId, youtubeId) {
const el = document.querySelector(`#${wrapperId}`);
el.innerHTML = `<div class="toast-ui-youtube-plugin-wrap"><iframe src="https://www.youtube.com/embed/${youtubeId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
}
/* 유튜브 함수 끝 */
const markdownBody =`
\`\`\`youtube
IUI2O8g2Rs4
\`\`\`
`;
//에디터 함수
function Editor1(){
var editor1 = new toastui.Editor({
el: document.querySelector('#editor-1'),
height:'500px',
previewStyle: 'vertical',
initialValue: markdownBody.trim(),
plugins: [toastui.Editor.plugin.codeSyntaxHighlight, youtubePlugin]
});
};
Editor1();
//뷰어 함수
function EditorViewer1__init() {
var viewer = new toastui.Editor.factory({
el: document.querySelector('#editor-viewer-1'),
initialValue: markdownBody.trim(),
viewer:true,
plugins: [toastui.Editor.plugin.codeSyntaxHighlight, youtubePlugin]
});
}
EditorViewer1__init();
'HTML&CSS&JavaScript' 카테고리의 다른 글
| [HTML] Form, Input (0) | 2021.01.11 |
|---|---|
| [HTML&CSS] Favicon (0) | 2020.12.24 |
| [HTML&CSS] Open Graph (0) | 2020.12.21 |
| 20.12.16 ToastUi-Editor 적용연습 - 4가지 형태의 에디터 생성 (0) | 2020.12.16 |
| [Java Script] JS 와 jQuery 1~33강 학습 (0) | 2020.12.16 |