XE, XpressEngine 1.8.20 기준.



사진 파일 첨부를 위해 ckeditor를 적용했고,

[xe, xpressengine - 모바일 ckeditor적용, 사진 파일 첨부]



ckeditor를 적용하니 ckeditor가 자연스럽게 적용되지 않아 모바일 여부 확인하여 툴바를 접고 높이를 줄이도록 하였다.

[xe, xpressengine - 모바일에서 ckeditor 크기줄이기, 툴바접기]


하지만 또 발생하는 문제는

ckeditor로 글을 작성할 경우 기본적으로 html 모드이고

모든 엔터가 nl2br 처리 되어 두번엔터된 효과가 나타났다.


해결은 글 입력/수정 시 모바일여부를 확인하고 nl2br을 붙여주는 부분을 수정한다.


파일 : xe/modules/document/document.controller.php


2곳을 고쳐야한다.

위 파일을 열어 Mobile로 검색해보면, 284라인(insertDocument)과 486라인(updateDocument) 근처에 다음과 같이 되어있다.


if(Mobile::isFromMobilePhone())

{

    if($obj->use_html != 'Y')

    {

        $obj->content = htmlspecialchars($obj->content, ENT_COMPAT | ENT_HTML401, 'UTF-8', false);

    }

    $obj->content = nl2br($obj->content);

}


아래처럼 if문 안으로 수정한다.


if(Mobile::isFromMobilePhone())

{

    if($obj->use_html != 'Y')

    {

        $obj->content = htmlspecialchars($obj->content, ENT_COMPAT | ENT_HTML401, 'UTF-8', false);

        $obj->content = nl2br($obj->content);

    }

}


모바일에서 html 모드일 경우 "<br>" 태그를 입력하기 너무 번거롭기 때문에 이렇게 작성되어있지만 아예 위즈윅에디터를 적용했기 때문에 자동으로 줄넘김 태그로 변환해줄 필요가 없기 때문.


Posted by freezn

XE, XpressEngine 1.8.20 기준.


아직 스킨을 수정해야한다.


수정하려는 스킨의 write_form.html 에서 본문 입력란(일반적으로 textarea)을

{$oDocument->getEditor()} 

로 대체한다.


처음엔 ckeditor 없이 파일만 첨부하도록 하고 싶었지만 파일첨부만을 해주는 기능은 찾지 못했고

getEditor 함수가 xe 설정상 기본 에디터와 파일첨부창을 함께 호출하므로 간편하게 적용이 가능하다.


대신 자연스러운 적용을 위해

[xe, xpressengine - 모바일에서 ckeditor 크기줄이기, 툴바접기]


를 함께 적용한다.




Posted by freezn

XE, XpressEngine 1.8.20 기준


XE 사용 중 모바일모드에도 사진첨부를 위해 스킨을 수정해서 ckeditor를 적용했다.

그런데 기본상태에서 툴바는 너무 크고 에디터 입력창 자체가 높아 불편하다.


그래서 툴바는 접어놓고, 크기를 줄여보기로 한다.


1차 시도 (실패) :

스킨에서 추가하는 js 에서 ckeditor 에 접근...

ckeditor 호출이 느려, 호출이 끝난 후 다시 접고 줄여야 하는데 문제가 발생한다.


2차 시도 (성공) : 

ckeditor는 설정파일이 있다.

모바일인지를 간단히 체크해서, 툴바를 펼치지 않고 높이도 지정해서 로딩되도록 한다.

xe에서 ckeditor의 설정파일은 비어있거나 없을 수 있다. 없으면 만들어준다.

파일 : xe/common/js/plugins/ckeditor/ckeditor/config.js



function checkMobileDevice() {

        var mobileKeyWords = new Array('Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson');

        for (var info in mobileKeyWords) {

                if (navigator.userAgent.match(mobileKeyWords[info]) != null) {

                        return true;

                }

        }

        return false;

}


if(checkMobileDevice()==true)

{

        CKEDITOR.editorConfig = function( config ) {

                config.toolbarStartupExpanded = false; // 툴바 접기

                config.height = 230; // 높이 설정

                config.removePlugins = 'liststyle,tabletools,contextmenu'; // context menu disable

        };

        CKEDITOR.replace( 'iframe', {

                 removePlugins: 'contextmenu,tabletools' // context menu disable

        } );

}


붙여넣기를 위해 롱터치 시 번쩍! 나타나는 ckeditor의 context menu 때문에 붙여넣기가 불가능했는데 context menu disable 관련 설정을 찾아 해결했다. 사실 아주 매끄럽지는 못하다.


+

checkMobileDevice() 는 너무 고전적이라 안되는 경우가 있을 수 있다.

https://github.com/kaimallea/isMobile/blob/master/isMobile.js

사용해도 되고...

Posted by freezn


cloudflare를 접해봤다.

워낙 잘되어있고 성능향상이나 서버ip감추기, 서버 성능 영향없는 ssl 적용 등 좋지만


이를 위해 http proxy(cdn)을 활성화 시키고 나면, 클라우드플레어 서버를 거쳐 오기 때문에

서버에 남는 사용자의 접속ip가 실제사용자 ip가 아닌 클라우드플레어 ip로 제공되는 바람에

기존 프로그램들이 말썽을 일으키는 경우가 많다.


특히 flexible/full/strict ssl은 클라우드플레어를 신뢰하지 않는다면 사용할 수 없는 기능.

여러 도메인을 모두 인증해주는 ECC 도메인 인증서기 때문에 인증서의 발급대상이 XXX.cloudflaressl.com 이다.

flexible/full/strict 관계 없이 모두 같다.


full/strict 을 사용하여도 서버와 클라우드플레어간의 전송구간, 사용자와 클라우드플레어와의 전송구간 이 암호화 되는 것이지 클라우드플레어가 컨텐츠를 볼 수 없는 것이 아니다.



막그린 그림이고 flexible ssl 적용시에 대한 예시이지만 대충 뭐 저렇다.


ssl을 적용하지 않아도 http proxy(cdn)기능을 활성화 하면 모든 통신은 클라우드플레어가 캐싱한다.

이때 사진이나 js, css 같은 정적인 자료는 캐싱되기 때문에 서버의 성능향상이 이루어진다.

하지만 프록시를 사용할 경우 개념상 사용자가 서버에 접속한 게 아니라 위 그림처럼 클라우드플레어가 사용자 대신 받았다가 사용자에게 보내주는 것이기 때문에 서버관점에서 접속한 사용자는 클라우드플레어 이다.


PHP의 경우 $_SERVER['REMOTE_ADDR'] 에 클라우드플레어의 IP가 나타난다. JSP, ASP, node.js 가릴 것 없이 당연히 모두 마찬가지다.


클라우드플레어는 이러한 점을 보완하기 위해 CF_로 시작하는 확장변수들을 제공한다.

참고 : http://stackoverflow.com/questions/14985518/cloudflare-and-logging-visitor-ip-addresses-via-in-php

PHP의 경우 $_SERVER["HTTP_CF_CONNECTING_IP"] 를 사용하면 실제 IP를 얻을 수 있다.



하지만 xe 같은 범용 프로그램을 사용하는 경우 이것의 관리가 너무 불편하다.

nginx의 경우 이런 프록시서버를 통한 접속의 경우를 위해 real_ip 모듈이 제공된다.

ubuntu 14.04 lts를 기준으로 다음 설정을 /etc/nginx/conf.d/cloudflare_realip.conf 파일로 만들어 넣고


set_real_ip_from 103.21.244.0/22;

set_real_ip_from 103.22.200.0/22;

set_real_ip_from 103.31.4.0/22;

set_real_ip_from 104.16.0.0/12;

set_real_ip_from 108.162.192.0/18;

set_real_ip_from 131.0.72.0/22;

set_real_ip_from 141.101.64.0/18;

set_real_ip_from 162.158.0.0/15;

set_real_ip_from 172.64.0.0/13;

set_real_ip_from 173.245.48.0/20;

set_real_ip_from 188.114.96.0/20;

set_real_ip_from 190.93.240.0/20;

set_real_ip_from 197.234.240.0/22;

set_real_ip_from 198.41.128.0/17;

set_real_ip_from 199.27.128.0/21;

set_real_ip_from 2400:cb00::/32;

set_real_ip_from 2606:4700::/32;

set_real_ip_from 2803:f800::/32;

set_real_ip_from 2405:b500::/32;

set_real_ip_from 2405:8100::/32;


# use any of the following two

real_ip_header CF-Connecting-IP;

#real_ip_header X-Forwarded-For;


sudo nginx -s reload 명령 한번 내려 설정 리로딩시켜주면 이후에는 원 아이피가 REMOTE_ADDR 같은 환경 변수에 담겨오게 된다.

xe의 조회수, 카운터 같은 기능들은 전적으로 ip에 의존하기 때문에 프로그램을 고치거나 위 설정을 적용해서 해결이 가능하다.


혹시 서버가 haproxy같은 또 다른 프록시를 사용하고 있다면 해당 ip도 위 설정에 적어서 해결할 수 있다.

이때에는 real_ip_header가 CF-Connecting-IP가 아닌 X-Forwarded-For 같은 범용 헤더이거나 또 다른 전용헤더일 수 있으니 해당 헤더를 확인.


Posted by freezn

현상 : ckeditor가 간헐적 혹은 아예 나오지 않음


해결 : Speed -> Rocket Loader™ 를 OFF



Posted by freezn

1.8.20 기준


참고 : https://www.xpressengine.com/tip/20953744


파일 : /classes/mail/Mail.class.php 133라인


Mail 생성자에

$this->useGmailAccount("계정", "패스워드");

추가


- 번거롭지만 xe 업데이트 시 다시 수정 필요

- gmail 2단계인증을 사용 중일 경우 계정->보안 에서 앱패스워드를 생성해서 사용

- 발송용 gmail 계정을 따로 만들어서 사용하는 것을 추천



Posted by freezn