마크다운 에디터 본문 내용 리스트 출력
본문
마크다운 에디터인 토스트 UI 에디터를 사용하고 있습니다!
(https://sir.kr/g5_plugin/7177)
리스트에 본문 출력을 하려고 했는데 리스트에서 본문 출력이 정상적으로 가능하긴 한데
리스트 제일 상단 게시물만 정상 출력이 되고 두번째 게시물부터는 마크다운 문법이 그대로 출력되더라고요!
제 생각에는...출력을 할 때 본문 내용 div를 id로 지정을 해서 그런 거 같거든요!
그래서 이 id를 class로 수정하면 되지 않을까 싶어서 extend 파일에 들어있던
tuieditor.php를 열어서 id로 되어있던걸 전부 class로 수정해서 지정을 했더니 전혀 안되더라구요!! ㅎㅎ...
리스트 스킨에서는 class 지정해서 사용법에 맞춰서 적어두고 있구요!
제가 잘못한 거 같은데 혹시 제가 잘못한 것인지 아니면 그냥 id 외에는 지정을 못하는 것인지 알려주실 수 있을까요? ㅠㅠ...
자바스크립트도 완전 초보라서 뭘 잘못했는지도 잘 모르겠네요 ㅠㅠ...!!
결론적으로는 class로 지정했을때에도 마크다운 에디터에서 쓴 본문 내용이 리스트에 출력이 되었으면 좋겠습니다!!
<list.skin.php>
~~
본문 출력 부분
<div class="listCont bo_content"><?php echo $list[$i]['wr_content']?></div>
~~
<?php tuieditor_Viewer("bo_content"); ?>
마지막 줄에는 이렇게 사용법에 적힌 것처럼 적어뒀습니다!
<tuieditor.php - 원본>
<?php
function tuieditor_Viewer($id){
global $config;
$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/plugins/abcjs/css/abcjs-audio.css">' ,10);
add_javascript('<script src="'.$editor_url.'/plugins/abcjs/js/abc.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-viewer.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/codemirror.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-chart.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-color-syntax.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-table-merged-cell.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-uml.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-custom-plugin.js"></script>',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/codemirror.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/toastui-editor.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/tui-chart.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/tui-color-picker.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/toastui-editor-viewer.css">',10);
?>
<script>
var text = unescapeHTML(document.getElementById('<?php echo $id?>').innerHTML);
var Viewer = toastui.Editor;
var { chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml} = Viewer.plugin;
var chartOptions = {
minWidth: 100,
maxWidth: 600,
minHeight: 100,
maxHeight: 300
};
new Viewer({
el: document.querySelector('#<?php echo $id?>'),
//initialValue: text,
plugins: [[chart, chartOptions], codeSyntaxHighlight, tableMergedCell, uml, youtubePlugin, abcjsPlugin, WebMPlugin, PDFjsPlugin]
}).setMarkdown(text);
//viewer.setMarkdown(text);
$('#<?php echo $id?>').show();
</script>
<?php }?>
<tuieditor.php - 수정>
<?php
function tuieditor_Viewer($class){
global $config;
$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/plugins/abcjs/css/abcjs-audio.css">' ,10);
add_javascript('<script src="'.$editor_url.'/plugins/abcjs/js/abc.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-viewer.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/codemirror.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-chart.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-color-syntax.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-table-merged-cell.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-editor-plugin-uml.min.js"></script>',10);
add_javascript('<script src="'.$editor_url.'/js/toastui-custom-plugin.js"></script>',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/codemirror.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/toastui-editor.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/tui-chart.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/tui-color-picker.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github.min.css">',10);
add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/toastui-editor-viewer.css">',10);
?>
<script>
var text = unescapeHTML(document.getElementByClassName('<?php echo $class?>').innerHTML);
var Viewer = toastui.Editor;
var { chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml} = Viewer.plugin;
var chartOptions = {
minWidth: 100,
maxWidth: 600,
minHeight: 100,
maxHeight: 300
};
new Viewer({
el: document.querySelector('.<?php echo $class?>'),
//initialValue: text,
plugins: [[chart, chartOptions], codeSyntaxHighlight, tableMergedCell, uml, youtubePlugin, abcjsPlugin, WebMPlugin, PDFjsPlugin]
}).setMarkdown(text);
//viewer.setMarkdown(text);
$('.<?php echo $id?>').show();
</script>
<?php }?>
답변 1
querySelector 로 클래스를 핸들링할 때는 첫번째 클래스에만 "약빨"이 먹습니다.
<div class="my">하나</div>
<div class="my">둘</div>
<div class="my">셋</div>
<div class="my">넷</div>
<div class="my">다섯</div>
<script>
document.querySelector(".my").style.color = "red";
</script>
결과는 아래처럼 첫 클래스에만 빨간색이 들어가죠.
하나
둘
셋
넷
다섯
-------
이럴때는 querySelectorAll 을 써서 루프문으로 돌려야 합니다.
<div class="my">하나</div>
<div class="my">둘</div>
<div class="my">셋</div>
<div class="my">넷</div>
<div class="my">다섯</div>
<script>
for (i of document.querySelectorAll(".my")) i.style.color = "red";
</script>
결과
하나
둘
셋
넷
다섯
----------
for of 문의 이해 - https://sir.kr/pg_tip/16985
핫 비타주리님!! 올려주신 자료 보면서 늘 공부하고 있어요!! 답변 감사합니다!! ㅎㅎ
올려주신 내용을 보고서 내용 수정도 해보고 오타도 고쳤는데 이번에는 콘솔에서 replace 에러가 뜨면서
아예 적용이 안되더라구요 ㅠㅠ 쿼리가 좀 복잡하게 짜여져있는 거 같아서...
그냥 마크다운 에디터를 포기할까 싶어요 ㅠㅠ...
