티모
55
2017-05-22 17:55:18 작성 2017-05-25 23:56:39 수정됨
25
8784

순수 자바스크립트 기반 웹 에디터 제작해 봤습니다..


혹시 필요하신 분들은 써보세요ㅎ



깃허브 주소 입니다.

들어가시면 데모사이트도 있습니다ㅎ


github.com/JiHong88/SunEditor




5
1
  • 댓글 25

  • keehyun2
    94
    2017-05-24 09:05:47
    잘만드셧네요~ ㅎㅎ
    1
  • 티모
    55
    2017-05-24 11:03:19

    감사합니다ㅎ

    사실 아이폰 브라우저에서 포커싱 문제가 좀 있는데 그건 해결이 잘 안되네요

    0
  • 파티쉐
    80
    2017-05-24 16:28:21
    ctrl + B 를 했는데 단축키가 안먹고 브라우저 북마크 탭이 자꾸 열리네요..


    1
  • 티모
    55
    2017-05-25 21:11:46 작성 2017-06-07 15:49:51 수정됨

    단축키 관련해서 다시 업데이트 했습니다ㅎ

    0
  • 파티쉐
    80
    2017-06-05 18:45:36

    이 에디터 모바일 환경에서는 버튼이 안 눌러지는것같습니다. 제 폰이 이상한건지.. 확인 부탁드릴께요

    1
  • 티모
    55
    2017-06-07 10:22:51

    혹시 핸드폰 기종 알수있을까요?

    그리고 일단 최신버전으로 받아서 다시 해보세요

    최근에 모바일 관련해서 업로드를 해서..

    0
  • 파티쉐
    80
    2017-06-07 17:24:53

    Galaxy on 7 이라고 저가폰이구요.

    사이트는 github에 나와있는 데모사이트입니다.

    1
  • 티모
    55
    2017-06-08 11:16:36

     혹시 정렬이나 링크삽입같은 버튼들은 되고

    글씨 굵게,기울기 이런 버튼만 안되는건가요?

    0
  • 파티쉐
    80
    2017-06-08 11:19:19
    에디터의 모든 버튼이 작동하지 않습니다.


    1
  • 티모
    55
    2017-06-08 17:56:36

    제가 테스트한 폰은 되는데 이상하네요ㅠ

    일단 데모사이트 소스 고쳐서 올렸는데

    한번 확인해 보실수 있나요?

    0
  • 파티쉐
    80
    2017-06-08 19:12:43

    제가 집에가서 동영상으로 촬영해서 링크 걸어드릴께요..

    제 폰만 안되는것 같습니다.

    삼성폰안에 기본 브라우저도 안되고 크롬브라우저도 안되네요

    1
  • 티모
    55
    2017-06-09 10:41:38

    버튼을 누를때 touchmove가 발생하면 

    누르지 않은것으로 간주를 하게 했는데

    이것 때문일수도 있을것 같아서 일단 제거후에 데모사이트 다시 올렸습니다

    0
  • 파티쉐
    80
    2017-06-11 19:55:49

    네.. 이제 잘 됩니다^^

    1
  • 티모
    55
    2017-06-12 10:20:45

    아 touchmove 이벤트가 되게 민감하게 반응하는것 같네요...

    그게 기종마다 다를수가 있나..

    원본 소스도 수정해서 올려 놓을게요^^

    1
  • wawabsy
    35
    2018-02-28 11:05:49

    안녕하세요. 

    혹시 이미지 업로드 하고 나서 callBack_imgUpload에서

    var xmlHttp = SUNEDITOR.plugin.image.xmlHttp;

    저는 xmlHttp게 null로 떨어지는대 아시는분 계시나요?

    1
  • 티모
    55
    2018-03-08 11:34:41

    모듈화 하면서 버그가 생긴것 같네용..

    수정해서 푸쉬했으니 다시 해보세요!ㅎ

    0
  • 심장을가진악마
    2
    2018-05-19 01:55:25

    ㄷㄷ 진짜 대단하신 ㄷㄷ

    잘 쓸게여

    0
  • 루리251
    2
    2020-01-20 12:23:29

    imageUploadUrl 설명을 이해를 못하겠는데 

    이미지를 올리면 그 url로 정보를 넘겨주는건가요?

    서블릿 주소를 잘못넘겨줬는지 아무것도 안나오네요 

    0
  • 티모
    55
    2020-02-10 00:27:36

    음.. 서버에서 내려주는 데이터도 형식에 맞게 지정해야 합니다.

    서버에 업로드는 되고있는건가요


    0
  • lilith
    29
    2020-03-10 02:48:13

    너무나 훌륭한 에디터 잘 보았어요. 저도 윗분처럼 고민하다가 질문 남겨봐요

    imageUploadUrl : string 해당 주소로 데이터를 보내는 건가요? 아니면 이미지를 업로드 시키는 건가요?

    해당 위치로 데이터를 보내면 그 데이터를 받아줄애를 또 만들어야 하는건가요?

    작업환경은 express로 api서버돌리고 react로 클라 작업하는데

    콘트롤 오리진을 와일드로 맞추고 url 주니까 빌드이후에 빌드(루트)/지정url 403에러가 뜨더라구요.

    물론 그 위치는 암것도 없어서 당연 에러겠지만요.

    홈페이지 보니까 ajax으로 처리되는것 같은데 힌트 바라요~^^



    0
  • 티모
    55
    2020-03-13 16:58:56

    안녕하세요~

    이미지 업로드는 서버에서 직접 구현해 주셔야 합니다.

    "imageUploadUrl" 주소로 파일 데이터를 보냅니다.

    express에서 request.files 로 확인할 수 있습니다.

    static 폴더에 이미지를 생성하고 

    'errorMessage': '',
    'result': [
      {
        'url': 'http://localhost:3000/static/uploadFiles/' + file,
        'name': fileName,
        'size': fileSize
      },
      ...
    ]

    이와 같은 형태로 response 를 보내면 됩니다.

    0
  • 아이스퀘어
    8
    2020-06-01 12:18:39

    안녕하세요! 리치 텍스트 에디터 쓸만한거 찾다가 이글을 보고나서 suneditor받아서 테스트 해보고 있는데요! 먼저, 너무 잘 만들어두셔서 제가 필요했던 기능 및 동작이 거의 다 구현되어있어서 감사말씀드립니다.

    테스트 중에, 테이블쪽에서 이슈가 한가지 있어서 문의드리려고 하는데, 댓글 보시면 답변 부탁드릴께요.

    테이블 셀 안에서 ㅆ, ㅉ, ㅃ 등 된소리 문자를 치고 완성하려고 하면
    예를 들어 짬 -> ㅉ ㅏㅁ 과 같이 제대로 처리가 안되거나, ㅉ은 다음 문자에 덮히는 이슈가 있습니다.

    이 이슈는 확인해본 브라우저 중에선 윈도우용 크롬 계열 브라우저에서 모두 동일하게 발생하였어요.
    (크롬, 엣지(새버전), 오페라, 웨일)

    파이어폭스나, 익스플로러에선 정상적으로 입력이 가능했습니다.

    커서 모양도 좀 달랐는데, 크롬 계열에선 세로 긴 줄 형태 커서, 파이어폭스나 익스플로러에선 글자를 덮는 형태의 커서 모양이었어요.

    혹시 확인해보시고 수정가능한지 답변 부탁드릴께요. 감사합니다!


    0
  • 아이스퀘어
    8
    2020-06-01 18:41:13

    자문 자답이 되네요..ㅎㅎ 위에 테이블에서 쌍자음 제대로 입력 안되는 문제는 확인해보니

    keydown eventlistner랑 관계가 있는듯 했습니다.

    chrome devtool에서 임의로 리스너를 삭제해서 해보니 정상동작하더군요.

    제 경우엔, keydown이벤트를 받아서 재정의할 일이 없어서 se-wrapper-input 클래스가 적용된 엘레멘트에서 keydown 리스너를 삭제해주는 코드를 추가해서 해결하였습니다.

    혹시 개발자분께서 이글 보시면, keydown listener관련해서 크롬에서 테스트해서 문제 해결하셨으면 좋겠어요.ㅎㅎ;

    1
  • 티모
    55
    2020-06-04 15:32:16

    감사합니다~!

    테이블 범위 선택관련 코드때문에 포커스가 갱신되고 있었네요.

    수정했으니 다음 버전 부터는 정상 동작합니다.

    커서 모양은 제가 정하는건 아니고 브라우저 마다 다른데, 파이어폭스나 익스플로러에서는

    조합문자 사용시 글자조합이 완료될때 까지는 범위선택으로 보이는것 같습니다.ㅎㅎ

    0
  • 아이스퀘어
    8
    2020-06-04 17:39:20

    댓글 달아주셨군요.ㅠㅠ

    그럼 다음 버전때 업뎃하고 작성해둔 부분은 삭제해서 써야겠어요.ㅎㅎ

    만드신지 꽤 됐는데 꾸준히 업데이트 하시는거 보니 존경스럽습니다!

    1
  • 로그인을 하시면 댓글을 등록할 수 있습니다.