채택완료

cheditor5에디터에서 cheditor.js 설정 부분 PC와 모바일을 구분하고 싶습니다.

2023-07-21 (금) 02:18:55 3,009

Copy
function setConfig() {
    var config = {
        allowedOnEvent      : true,
        colorToHex          : true,
        docTitle            : '내 문서',
        editAreaMargin      : '5px 10px',
        editorBgColor       : '#fff',
        editorFontColor     : '#000',
        editorFontName      : '"맑은 고딕", "Malgun Gothic", gulim',
        editorFontSize      : '12px',
        editorHeight        : '300px',
        editorPath          : null,
        editorWidth         : '100%',
        exceptedElements    : { script: true, style: true, iframe: false },
        fontSizeValue       : 'px',     // [pt, px]
        fullHTMLSource      : false,
        imgBlockMargin      : '5px 0px',
        imgCaptionFigure    : 'border: 1px #ccc solid; background-color: #f0f0f0; margin: 0',
        imgCaptionText      : 'margin: 5px 5px; text-align: left; line-height: 17px',
        imgCaptionWrapper   : '',
        imgDefaultAlign     : 'left',   // [left, center, right]
        imgJpegQuality      : 1,     // JPEG 사진의 퀄리티 값, 최대값 1
        imgMaxWidth         : 800,      // 사진 최대 가로 크기, 이 크기 보다 크면 리사이징 처리
        imgResizeMinLimit   : 32,       // 사진 리사이징의 사용자 직접 입력 값이 이 값 보다 작으면, 이 값으로 설정
        imgResizeSelected   : 640,      // 사진 리사이징의 선택 입력 폼의 기본 선택 값
        imgResizeValue      : [120, 240, 320, 640, 800, -1], // -1 = 사용자 직접 입력
        imgSetAttrAlt       : true,
        imgSetAttrWidth     : 1,        // -1 = (width="100%"; height="auto"), 0 = 설정 안함, 1 = 기본값
        imgUploadNumber     : 12,
        imgUploadSortName   : false,
        imgWaterMarkAlpha   : 1,        // 워터마크 불투명도 (최대값 1)
        imgWaterMarkUrl     : '',       // 워터마크 이미지 URL (예: 'http://udomain.com/plugin/editor/cheditor5/icons/watermark.png')
        includeHostname     : true,
        lineHeight          : 1.7,
        linkTarget          : '_blank',
        makeThumbnail       : false,    // 사진의 썸네일 이미지 생성, 가로 크기는 thumbnailWidth 값, 세로는 자동 계산
        paragraphCss        : false,    // true = <p style='margin:0'></p>, false = <p></p>
        removeIndent        : false,
        showTagPath         : false,
        tabIndent           : 3,
        tabIndex            : 0,
        thumbnailWidth      : 120,

      
    },

위의 코드중에 

이미지 추가 시 

imgSetAttrWidth     : 1,        // -1 = (width="100%"; height="auto"), 0 = 설정 안함, 1 = 기본값

이 부분을 PC는 1,  모바일은 -1로 설정하고 싶습니다. 

어떻게 해야 하는지 도움 부탁 드립니다. 

답변 3개 / 댓글 1개

채택된 답변
+20 포인트

https://github.com/gnuboard/gnuboard5/blob/master/config.php#L218

Copy
...

//define('G5_IS_MOBILE_DHTML_USE', false);

define('G5_IS_MOBILE_DHTML_USE', true);

...

https://github.com/gnuboard/gnuboard5/blob/master/plugin/editor/cheditor5/editor.lib.php#L40

Copy
...

        $html .= "ed_{$id}.config.imgReSize = false;\n";                
        $html .= "ed_{$id}.config.imgSetAttrWidth = (g5_is_mobile == '1') ? -1 : 1;\n";

       ...

답변 감사말씀 올립니다. ㅜㅜ 적용해 보겠습니다. 늘 건강하시고 행복하셔요

방법은 여러가지가 있겠으나.. 일단 가장 쉬운 방법으로는 모바일과 PC 파일을 분리하는겁니다.

cheditor.js 를 cheditor_mobile.js 로 복사해 두시고 cheditor_mobile.js 에서 수정합니다.

plugin/editor/cheditor5/editor.lib.php (최신버전 기준 31번줄 부터) 를 수정합니다.

기존코드

Copy
if ($is_dhtml_editor) {

        if ($js) {

            $html .= "<script src=\"{$editor_url}/cheditor.js\"></script>";

        }

수정코드

Copy
if ($is_dhtml_editor) {

        // PC 경우 cheditor.js, Mobile 경우 cheditor_mobile.js 불러옵니다.

        $cheditor_script = is_mobile ? 'cheditor_mobile.js' : 'cheditor.js';

        if ($js) {

            $html .= "<script src=\"{$editor_url}/{$cheditor_script}\"></script>";

        }

답변에 대한 댓글 1개

오오 이런 신박한 아이디어를 주셔서 감사합니다.

답변을 작성하려면 로그인이 필요합니다.