썸머노트에서 코드미러 기능을 활용하고 싶습니다.
별도의 코드미러 스크립트를 추가해야하는데, 글쓰기 페이지에서만 로드하고 싶습니다.
어떻게 하면 되나요?
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>
위 코드가 글쓰기 폼에서만 로드되게 하고 싶습니다.
굳이 모든 테마나 게시판 글보기에서는 동작하지 않아도 될듯 합니다.
안녕하세요~^^
KBoard 플러그인에서 썸머노트 사용 시
코드 미러를 적용하시려면 아래의 코드를 활용해보시겠어요?
add_action('kboard_skin_header', 'kboard_skin_header_20210208', 10, 1);
function kboard_skin_header_20210208($builder){
$board = $builder->board;
if(kboard_builder_mod() == 'editor' && $board->id == '1'){ // 실제 게시판 id로 적용해보세요.
wp_enqueue_style('summernote-codemirror', '//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css', array(), '3.20.0');
wp_enqueue_style('summernote-monoakai', '//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css', array(), '3.20.0');
wp_enqueue_script('summernote-codemirror', '//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js', array(), '3.20.0');
wp_enqueue_script('summernote-codemirror-mode', '//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js', array(), '3.20.0');
wp_enqueue_script('summernote-codemirror-formatting', '//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js', array(), '3.20.0');
}
}
위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해보세요.
테마의 functions.php 파일에 코드를 추가하거나 Code Snippets 플러그인을 사용해서 코드를 추가할 수 있습니다.
썸머노트 코드 미러 공식 문서는
아래 링크를 참고 부탁드립니다.
https://summernote.org/examples/#codemirror-as-codeview
고맙습니다.
FTP로 접속해서 /wp-content/plugins/kboard/template/js/script.js 파일에
아래의 코드를 찾아서
placeholder: placeholder
아래의 코드로 교체하시면 테마도 적용하실 수 있습니다.
placeholder: placeholder,
codemirror: { // codemirror options
theme: 'monokai'
}
고맙습니다.