Suneditor: Question. How to find the location of the currently focused cursor?

[hajeonghun]

@JiHong88

How to find the location of the currently focused cursor?

현재 에디터에서 3줄을 입력하였을 경우, 2번째 라인에 포커스 되어 있을때 에디터 내부에서 focusing중인 해당 라인의 높이를 구할수있나요?
(offsetTop, height 등등)

core객체에 접근하면 firstElement, lastElement에 대해선 알 수 있는데, 현재 포커스중인 객체에 대한 값을 찾지 못해 문의드립니다.

<p>첫번째</p>
<p>두번째</p>    <---- focus
<p>세번째</p>

[JiHong88]

현재 선택된 포맷태그 찾기
getSelectedElements

현재 선택된 포맷태그 및 컴포넌트 찾기
getSelectedElementsAndComponents

테이블은 셀마다 포맷태그가 들어있기 때문에..
라인 삭제 때문이면 아래 코드를 참고하시면 될 거 같네요.

// 현재 노드
const currentNode = core.getSelectionNode();
// 현재 이미지, 테이블, 링크 등에 포커스가 있어서 편집 컨트롤러가 있을때 해당 플러그인의 이름 , 타켓 엘리먼트
core.currentControllerName; core.currentControllerTarget;

let f;
// 이미지 등의 file component 에는 포커스가 가지 않습니다.
const fileComponentInfo = this.getFileComponent(core.currentControllerTarget);
if (!!fileComponentInfo) {
  f = fileComponentInfo.component;
} else {
  // 테이블 포함된 현재 노드의 최상위 라인 찾기
  f = util.getParentElement(currentNode, function (current) {return this.isWysiwygDiv(current.parentElement)}.bind(util))
}

[hajeonghun]

현재 선택된 포맷태그 찾기
getSelectedElements

현재 선택된 포맷태그 및 컴포넌트 찾기
getSelectedElementsAndComponents

테이블은 셀마다 포맷태그가 들어있기 때문에..
라인 삭제 때문이면 아래 코드를 참고하시면 될 거 같네요.

// 현재 노드
const currentNode = core.getSelectionNode();
// 현재 이미지, 테이블, 링크 등에 포커스가 있어서 편집 컨트롤러가 있을때 해당 플러그인의 이름 , 타켓 엘리먼트
core.currentControllerName; core.currentControllerTarget;

let f;
// 이미지 등의 file component 에는 포커스가 가지 않습니다.
const fileComponentInfo = this.getFileComponent(core.currentControllerTarget);
if (!!fileComponentInfo) {
  f = fileComponentInfo.component;
} else {
  // 테이블 포함된 현재 노드의 최상위 라인 찾기
  f = util.getParentElement(currentNode, function (current) {return this.isWysiwygDiv(current.parentElement)}.bind(util))
}

넵, 참고하겠습니다. 추가로 이미지 삽입시에 원본파일이 그대로 들어가 고화질의 사진일 경우
용량이 엄청 커지는 이슈가 있어서 그런데, 이미지 삽입시 해상도를 낮춰서 용량을 줄이는 옵션등의 해결방법이 있을까요?

[JiHong88]

해당 이슈 링크 남겨드릴게요.

378

[hajeonghun]

해당 이슈 링크 남겨드릴게요.

378

정말 감사합니다. 이미지 관련하여 추가 질문 드려도 될까요?

이미지링크를 통한 삽입이 아닌, 로컬파일의 이미지를 올릴 경우 html코드가 매우 길어져 로컬 파일 업로드시 제 파일서버에 올린후 handleImageUpload() 메소드의 targetImgElement.src = ‘이미지링크’ 를 통해 html코드를 줄이고 싶습니다.

처음부터 이미지 링크로 삽입시에는 handleImageUpload
로컬 파일 삽입시에는 내부적으로 handleImageUploadBefore-> handleImageUpload 순서로 동작하는 것 같은데

로컬파일을 올린 경우에만 파일 서버에 업로드후 링크를 바꿔주는 방식을 구현하고 싶은데요.
handleImageUploadBefore에서 Files 객체안에 임의의 값을 추가한 후 uploadHandler로 넘겨도 handleImageUpload 의 imageInfo에는 해당 값이 안넘어 오더라고요. 로컬파일을 삽입 한건지, 이미지 링크로 삽입한건지 구별 할 수 있는 방법이 있을까요?

또는, 이 방법말고 이미지를 올릴 경우 html코드를 짧게 할 수 있는 더 좋은방법이 있을까요?

+) 이미지는 2장이상 한번에 넣을 수 없는거죠?

[JiHong88]

이미지 링크는 파일이 아니기 때문에 upload 관련 함수들이 호출되지 않습니다.
그리고 이미지는 서버에 업로드하는것 말고는 다른 선택지가 없는것 같네요.
base64 로 처리하는건 기본 옵션이지 추천드리는 방법은 아닙니다.

"handleImageUpload" 메소드는 없고 "imageUploadHandler" 를 말씀하신거라면,
이건 기본 업로드함수를 대체하는 메소드 입니다.
"imageUploadUrl" 옵션만 지정하고 서버에서 지정된 포맷으로 response 를 주면 됩니다.
자세한건 README 파일에 설명되어 있습니다. https://github.com/JiHong88/SunEditor#options

+) 이미지는 2장이상 한번에 넣을 수 없는거죠?

imageMultipleFile: true 로 설정하면 여러장 선택이 가능합니다.

[hajeonghun]

imageUploadHandler

네 imageUploadUrl을 이용하는 방법이 가장 이상적인 것 같습니다.
근데 제 api 서버에서는 무조건 권한체크를 해야해서 맵핑한 주소에 파일을 전송할때

Request Header에 토큰 값 및 Request Body에 추가적인 값을 넣고싶은데 방법이 있을까요?

[JiHong88]

"imageUploadHeader" 옵션이 있습니다.
Body 에 는 어떤 데이터를 더 넣는건가요?

[hajeonghun]

"imageUploadHeader" 옵션이 있습니다.
Body 에 는 어떤 데이터를 더 넣는건가요?

우선, 잦은 질문에도 빠른 피드백 감사드립니다.

Body에는 현재 다른 API를 호출할 경우, 예로들면 로긴한 사용자의 휴대폰번호를 공통적으로 넣어서 휴대폰번호로 구분하여
혹시 Body도 설정방법이 있나해서 여쭤봤습니다. 없다면 API를 수정하여 다른방법을 이용할려고 합니다.

[JiHong88]

Body 에 대한 설정 방법은 없습니다.
API 를 수정 하거나..
onImageUploadBefore 에서 직접 업로드 후 "register" 를 호출하여 이미지를 삽입 할 수 있습니다.

[hajeonghun]

Body 에 대한 설정 방법은 없습니다.
API 를 수정 하거나..
onImageUploadBefore 에서 직접 업로드 후 "register" 를 호출하여 이미지를 삽입 할 수 있습니다.

---

네, Promise()에서 파일업로드 성공후 then 함수 내부에서 core.plugins.image.register.call에 필요 파라미터 삽입후 호출하였는데
404가 떠서 파일 다운을 받지 못하네요. 그 이후에 다시 똑같은 주소로하면 파일 다운이 성공되는데 ㅠㅠ 딱히 좋은 방법이 안떠오르군요

b4fc9980-bc45-11ea-af3f-3d75673c335a.jpg:1 GET http://dev.api0.~~~/2020/07/02/b4fc9980-bc45-11ea-af3f-3d75673c335a.jpg 404 (Not Found)

[JiHong88]

음.. 그러면 지금 파일이 업로드 되기전에 "register" 가호출되는거 같은데요
register 에 주는url 값도 확인해보세요

[hajeonghun]

음.. 그러면 지금 파일이 업로드 되기전에 "register" 가호출되는거 같은데요
register 에 주는url 값도 확인해보세요

then안에서 url있으면 호출하고 있어서, 우선 제가 놓친부분이 있는지 확인해보겠습니다^^ 여러모로 감사합니다.