질문/공유질답게시판

아이폰에서 ckeditor 로딩이 되지 않는 이유를 알 수 있을까요?

Lv5
해태맛동산
Extra Form
PHP PHP 7.4
CMS Rhymix

최근에 모바일에서 자꾸 잡오류가 많이 뜨네요.

안드로이드 폰에서는 ckeditor가 정상적으로 출력 되는데

아이폰에선 로딩이 안되네요;;

 

개발자도구 보면

Uncaught TypeError: Cannot read property 'replace' of null
    at HTMLDocument.<anonymous> (index.php?mid=change&act=dispBoardWrite:277)
    at fire (jquery-2.2.4.js?20200723173339:3187)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.js?20200723173339:3317)
    at Function.ready (jquery-2.2.4.js?20200723173339:3536)
    at HTMLDocument.completed (jquery-2.2.4.js?20200723173339:3552)

 

이런 오류가 뜨고 index.php?mid=change&act=dispBoardWrite:277 찾아 가보면

$('head').append('<st' + 'yle>' + additional_styles + css_content.replace(/\.xe_content\.editable/g, '.cke_wysiwyg_div') + '</st' + 'yle>');

위 부분이 문제가 되네요.. 

 

 

위로 아래로
댓글 29
  • Lv36

    modules/editor/skins/ckeditor/editor.html 29번째 줄 전후

     

    {@ $css_content = null }

     

    이 부분을

     

    {@ $css_content = "" }

     

    이렇게 바꿔주세요.

  • Lv36 Lv30

    저희는 에디터는 뜨는 글쓰기 창에서 취소버튼을 누르면 입력 공간인 것 처럼 커서가 버튼 위에 깜빡이고 하는 증상이 있는데 혹시 뭐가 문제일까요.....

     

    해당 화면에서 메뉴 버튼을 눌러 메뉴가 나오면 메뉴 중 하나를 터치해도 역시 메뉴 위에서 커서가 깜빡이네요...

    비밀,공개,댓글 허용 체크를 누르기도 힘드네요..

     

    댓글도 새창에서 댓글쓰기 CK에디터인데 댓글 쓰는 곳에서는 이상이 없네요.

     

     

    사이트 2개가 현재 같은 증상이네요. 아이폰으로 테스트를 안해봤는데 지금 해보니 그렇네요.

  • Lv36 Lv5
    와.... 바로 로딩되네요 -0-...
    항상 감사합니다!
  • Lv30 Lv36

    태그가 제대로 안 닫혀서 버튼 부분까지 에디터의 일부로 잘못 인식하거나... 커서가 깜빡이는 것이 아니라 그 부분의 글자가 잠깐 선택되었다가 취소되는 것이거나... 아니면 라르게덴님이 최근 작업해 주신 iOS 패치의 부작용일 수도 있습니다. (자세히 보지는 않았습니다만, ios_enterkey 플러그인에서 IME 상태를 강제로 변경하기 위해 window.getSelection()을 조작하는 방식을 사용한다면 엉뚱한 곳의 글자가 순간적으로 선택될 가능성이 없지 않습니다.)

  • Lv36 Lv30
    일단 없던 증상이 나타난건 맞는데요. 이게 에디터자동완성 모듈에서 플러그인과 충돌이 나는 듯 한데요. 어디서 해결을 해야 하는건지 잘 모르겠습니다.
    에디터자동완성 모듈은 계속 서비스를 해서 의존했던거라 서비스를 없애긴 곤란한 상황이라 지속 서비스를 해야 하긴 한데요.
  • Lv30 Lv15

    혹시 제가 예전에 웹지기님 글에 댓글 달았던 내용이 있는데 기억하시나요?

    https://xetown.com/topics/1426945#comment_1427187

    방금 이야기 하신 현상이 웹지기 님이 겪은 현상과 같습니다.
    혹시 두 사이트 모두 엔터키 플러그인을 사용해제하셨는지요?

  • Lv15 Lv30
    엔터키 플러그인은 코어에서 제거 되어있어서요. 디벨롭버전 사용중입니다.
  • Lv30 Lv15
    다시 엔터키 플러그인을 사용하도록 처리하고 해보세요. 아마 그 문제는 사라질겁니다.

    이게 문제가 복잡한게 엔터키 플러그인을 쓰면 엔터키가 약간 이상하게 먹히고 또 엔터키 플러그인을 끄면 에디터 영역을 넘어 삭제가 되는 현상이 발생합니다.
  • Lv30 Lv36
    특정한 서드파티 모듈과 ios_enterkey 플러그인의 충돌이라면 1) 해당 모듈 제작자분이나 2) ios_enterkey 플러그인을 만드신 라르게덴님, 둘 중 최소 한 분이 관여를 해주셔야 해결의 실마리를 찾을 수 있을 것 같습니다. 문제를 일으키는 모듈이 오픈소스가 아닌 경우 무척 골치아프지요.
  • Lv15 Lv30
    코어에서 반영된 거라 제가 임의로 빼봐야 다시 적용될텐 어찌 해야할까요.. 흠......
  • Lv30 Lv15
    윗 댓글을 보시면 엔터키 플러그인 제거후 저도 비슷한 문제가 있었으나
    결국은 울며 겨자먹기로 엉뚱한 부분이 삭제되느니 약간 불편한 엔터키 오류를 달고 있는게 낫다고 판단하였습니다.
  • Lv36 Lv30
    그게 문제입니다. 관리 주체가 확실하게 추적해서 관리를 해주는 상황이 아니라서요...
  • Lv30 Lv36
    아무튼 둘 다 키보드 입력 과정에 관여하는 기능이니 충돌이 일어날 가능성이 무척 높아 보이기는 합니다.
  • Lv30 Lv15
    관리자 메뉴 > 고급설정 > 에디터 > 추가 플러그인 로드

    부분에 enterkey를 추가해보세요.
  • Lv15 Lv30
    네. 테스트를 위해서 그리고 불편 해소를 위해서는 지금 할 예정인데요. 이게 영구적인 해결을 했으면 해서요.
  • Lv36 Lv30
    네. 에디터자동완성 모듈에도 ios엔터키 플러그인이 따로 있을거에요...
  • Lv30 Lv15
    네. 저도 영구적인 해결을 바라고 있지만 CK 에디터 개발쪽에서 해결을 해줘야 하는 문제가 아닌가 싶습니다. ㅠㅠ
    라이믹스 쪽에서 해결이 어려운 문제 아닐까합니다.
  • Lv15 Lv30

    enterkey 키를 추가해서는 안되네요. 파일에서 제거하는 부분을 잠시 지워봐야겠습니다.

    제가 말씀 드린 증상이랑 약간 다르거 같구요. 백스페이스가 문제가 아니고 저희는 아예 화면에 보이는 버튼들을 누르면 거기에 커서가....

  • Lv15 Lv30
    enterkey 를 제거해서 그런것은 아닌것 같습니다. 저희 사이트에서 나타나는 증상은 조금 다른 것 같구요.
    에디터자동완성모듈의 ios엔터키 플러그인과 코어것과 충돌인거 같아 일단 구름이님께 문의를 남겨 놓아야 겠네요.
  • Lv30 Lv15
    네. 그게 저랑 같은 문제 입니다.

    에디터 영역을 벗어나서 편집이 가능한 상황입니다.
    저는 백스페이스를 눌러서 쭉 지워졌지만 커서가 다른데에 있던 상황입니다.

    그 때 상황을 찍어놨었는데 비교 한번 해보시기 바랍니다.
    https://photos.google.com/share/AF1QipNsrV1E4RG5MHG2dV-tXL-SV7lHEiImrgQMs4BFpaw_qWP4m2YqGtl5atqsT7xQfA/photo/AF1QipOqfZWzrju2RZ-0Z6k_3IV_l4gUmlebiSw6TP19?key=em5HRVNOX1ozbWVoRHY2LWVMcjJ5NGFVeHprWHpn

    저도 에디터 자동완성 모듈과 enterkey 플러그인 제거 시에 이런 부분에 문제가 발생하더군요.

    추가 플러그인 로드 부분에 ios_enterkey 로 해보세요.
  • Lv15 Lv30

    백스페이스 누르니 정말 엉뚱한 것들이 사라지네요. 해당 증상이 같네요.

    근데 추가 플러인 로드에 ios_enterkey 를 할 필요가 있나요? 이건 이미 ios 에서는 불러오게 되어있고 ios에서는 enterkey 플러그인을 제거하게 되어있는데요.

     

    ios_enterkey,enterkey 두가지 추가해 봐도 증상은 동일하네요.

    저희랑 코어가 다른가요?

     

     

    https://github.com/rhymix/rhymix/commit/ec2e3e59cc4e4133e58e0ea088018a56f1c99d60

     

    이거 적용되신 코어 쓰시는건가요?

     

  • Lv30 Lv15
    네 그렇게 해야 삭제가 안되더라구요.

    저도 예전에 구름이 님께 이 문제를 여쭤본적이 있고 그 내용을 찾아보니 그 때 질문 내용이 웹지기님의 문제와 같네요.

    =================
    안녕하세요.



    어제 오늘 질문은 갑자기 많이 드려 죄송합니다.

    automention 모듈 사용중에 PC에서는 문제가 없습니다.



    하지만 모바일에서 에디터를 불러올 때 콘솔창에서 아래와 같은 에러가 발생하며 에디터 영역 뿐 아니라 사이트 전역에 커서가 위치하면서 글쓰가 쓰여지는 현상이 발생하였습니다.

    - 이하 생략 -
    ==========================


    쓸데없는 부분이 편집되는 것 보다 차라리 엔터키에만 문제있는게 나은것 같습니다.
    최악보다는 차악이 나으니깐요. ㅠㅠ

    라이믹스 마스터 브랜치에서는 modules/editor/skins/ckeditor/editor.html 파일에
    settings.ckeconfig.extraPlugins = (settings.ckeconfig.extraPlugins ? (settings.ckeconfig.extraPlugins + ',') : '') + 'divarea,ios_enterkey';
    이렇게 ios_enterkey 가 기본으로 들어가있어서 그냥 그대로 쓰는 중입니다.

    제가 디벨롭 브랜치로는 설치를 안해서 그 이후에는 확실한지 잘 모르겠으나
    에디터 자동완성 모듈과 ios_enterkey의 이슈인것 같습니다. ㅠㅠ
  • Lv15 Lv30
    아.. 그럼 예전거 쓰시는군요. 엔터 문제는 그냥 두시는거군요.
    저는 지금 엔터문제 해결된 ios플러그인 적용해서 증상이 다른거 같네요.
  • Lv30 Lv15
    아.. 다른 버전인가보네요.

    하지만 동일한 문제가 일어난다니.. 흠.. 어렵네요 ㅠㅠ
  • Lv15 Lv30
    네. 엔터문제 해결해준 디벨롭 버전입니다.
  • Lv15 Lv30
    일단 엔터키 해결된 코어 적용하시면 해결하셔야 하니 임시로

    자동완성 모듈의 m.skin 의 document.html 의 46 ~ 52번 라인 즘 ios 에서 불러오는 js 를 제거해서 에디터가 사용 가능한 상태로 회복시킬 수 있습니다.
    어차피 지금 에디터자동완성모듈에서 최신 패치에 대응하지 않으면 멘션 기능 같은 타이핑 기능이 동작하고 있지 않으니 고쳐질 때 까지 파일을 불러오지 않는게 최선 인듯 합니다.


    <load target="css/jquery.atwho.min.css" />
    <!--@if($Android)-->
    <load target="js/jquery.atwho.and.js" />
    <!--@else-->
    <load target="js/jquery.atwho.ios.js" /> // 제거
    <load target="js/am_at.js" /> // 제거
    <!--@end-->
  • Lv30 Lv15
    제가 해당 문제가 있었던게 5월 6일쯤이었는데 구름이님께 여쭤봤을 때 같은 답변을 받았습니다.

    그 때 구름이님 답변이긴 합니다.

    ========
    해당 콘솔의 오류는 이모티콘 플러그인이 로딩되면서 발생되는 오류입니다.

    modules/autometion/m.skins/default/document.html 파일을 열어 보시면..

    아래와 같이 48~52 라인이 있습니다.

    빨간색 부분을 삭제해주세요.



    <!--@if($Android)-->
    <load target="js/jquery.atwho.and.js" />
    <!--@else-->
    <load target="js/jquery.atwho.ios.js" />
    <load target="js/am_at.js" />
    <!--@end-->
    =============

    웹지기 님이 해결하신 방법과 동일한 방법입니다만.. 그래도 문제가 발생하기도 하고 언젠가는 해결이 되겠지라는 생각에 그냥 원복시켜놓은 상태입니다.

    그리고 위 내용에 추가로 아래 내용도 댓글로 달아주셨습니다.



    ============
    테스트를 해보니 사이트 환경에따라 멘션 호출시 출력되는 멘션 목록이 에디터 아래쪽으로 출력되어 보이지 않는 현상이 발생될수 있습니다.
    만약 그렇다면.. 아래와 같이 멘션 목록의 높이 조정이 가능하겠습니다.

    <!--@if($Android)-->
    <load target="js/jquery.atwho.and.js" />
    <!--@else-->
    {@ $mconfig->mm_mb_top = "-100"; }
    <!--@end-->


    -100 부분을 알맞게 조정해주세요.

    감사합니다.

    ==============


    해당 질문 글은 원래는 공개 질문으로 구름이님 사이트에서 질문을 하였으나 구름이 님이 이 문제는 아직 뚜렷한 해결책이 없어서 비공개로 전환을 하셨습니다. 방금 구름이님 사이트에서 웹지기님의 질문글을 보았으나 비슷한 답변을 받을 것으로 예상합니다.
  • Lv15 Lv30
    흠... 하고 싶은 말은 많은데 아끼겠습니다.

    일단 위 높이값 조절해도 목록이 나타나지 않으니 차라리 그냥 해당 옵션값은 넣지 않고 아예 기능 자체를 안쓰는 것으로 임시로 유지 해야겠네요.
    답변 감사합니다.
  • Lv30 Lv15
    넵.
    하고싶은 말이 뭔지 알 것같습니다.
    여튼 빠른 시일내에 잘 해결이 되었으면 좋겠네요. 좋은 밤 보내세요.