라이믹스/xe에서 내용 접기 기능 있나요?

확장컴포넌트 클릭하면 인용구작성이라고 있습니다..
안보이면 관리페이지에서 활성화 시키면 됩니다.

출처 : https://xe1.xpressengine.com/index.php?mid=qna&document_srl=18343301&m=0

인용구작성 에디터컴포넌트

다운로드 : https://xe1.xpressengine.com/index.php?mid=download&package_id=18324273

설명

글 작성시 글의 내용 중 일부를 인용구로 표시하거나 접고/ 펴기 기능을 부여하는 에디터 컴포넌트입니다.

사용방법

./modules/editor/components/quotation

라이선스

LGPL v2

에러내용

Uncaught TypeError: opener.editorGetSelectedHtml is not a function

at insertQuotation (popup.js?20150519155407:118)

at HTMLAnchorElement.onclick (index.php?module=editor&act=dispEditorPopup&editor_sequence=441040&component=quotation&mid=qna:213)

스크린샷

.... 오류로 사용 불가능하군요..쓰읍~

에디터에서 선택 영역을 컴포넌트로 불러올 때, 굵은 표시 참고

function getText() {
// 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
var fo_obj = xGetElementById("text_form");
var text = opener.editorGetSelectedHtml(opener.editorPrevSrl);
if(text==undefined) text = "";
text = text.replace(/<([^>]*)>/ig,'').replace(/</ig,'<').replace(/>/ig,'>').replace(/&/ig,'&');
fo_obj.contents.value = text;
return;
}
xAddEventListener(window, "load", getText);

컴포넌트의 HTML 내용을 에디터에 적용할 때

/* 부모창의 위지윅 에디터의 선택된 영역의 글자색을 변경 */
function completeCreateLink() {

var sHTML = preview.innerHTML;

opener.editorFocus(opener.editorPrevSrl);

var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)

opener.editorReplaceHTML(iframe_obj, sHTML);
opener.editorFocus(opener.editorPrevSrl);

self.close();
}

출처 : http://simulz.kr/xe/board_xe_manual/1871

라르게덴님께 지원 요청을;;

https://romanesque.me/forum/17051

보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다.

근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다.

바로 <details> 와 <summary> 코드인데요.

<details>코드만 적용해도 아래와 같이 적용됩니다.

<details>
<p>details코드만 적용</p>
</details>

<details> 와 <summary> 코드를 같이 적용하면

<details>
<summary>Click Me!</summary>
<p>details, summary 같이 적용</p>
</details>

Click Me!

근데 위와 같이 보이지는 않고 상단의 세부정보 같이 보입니다.

아래의 css가 적용되어져 그렇습니다.

자! 그럼 css까지 같이 구현해 볼까요.

<details>
<summary>Click Me!!!</summary>
<div class="tpt">details 과 summary 그리고 css까지 적용</div>
</details>

@keyframes reveal {
from { opacity:0; transform:translate3d(0, -30px, 0); }
to { opacity:1; transform:translate3d(0, 0, 0); }
}
</style>

Click Me!!!

간단하죠 근데 아쉽게도 익스플로러에서는 작동하지 않습니다.

익스에서는 그냥 펼쳐저 보입니다.

처음 부터 펼쳐져 보이게 하는 옵션도 간단합니다.

<details open>
<p>details에 open만 적용</p>
</details>

details에 open만 적용

익스만 신경 쓰이지 않는다면 접고, 펼치는 폴딩기능을 구현하는데는 정말 유용한 코드입니다.

그리고 게시판에서도 소스만 적용하면 간단히 구현됩니다.

출처 : https://marshall-ku.com

(https://moonhouse.co.kr/html/529065)

오후 01:02

	제목	날짜
	본 게시판의 용도	2024/06/11
34	[XE] [EOND] 스케치북 기반 유튜브 스킨 설치 후 설정부분에서.. [3]	2023/03/20
33	[기타] [최근게시물] 유투브 출력 위젯을 구매했는데 위젯 다운은 어디서 받나요?	2023/03/22
32	[XE] eondZenithworld Layout 구매후 설정 적용이 안되는 것 같습니다. [4]	2023/04/05
31	[XE] 프로젝트 관리는 어떻게 하나요?	2023/06/08
30	[XE] 코노리 콘텐츠 모듈(contents) 발생 오류 [2]	2023/06/09
29	[XE] 라이믹스(XE)에서 견적의뢰 게시판을 만들고 싶습니다. 어떤 위젯 혹은 모듈을 써야 하나요? [1]	2023/06/13
28	[XE] 디비 쿼리문 질문	2023/06/27
27	[XE] 라이믹스 2.1.2 + PHP8.0.3 에러로그입니다.	2023/07/16
26	[XE] 성인인증화면 [2]	2023/08/06
25	[기타] ‘민관협력 디지털 사회 혁신 지원체계 구축운영 사업’ 관련 협조 문의	2023/08/16
24	[XE] 소상공인 및 자영업자를 위한 커뮤니티 사이트 제작용 테마 패키지 [4]	2023/08/27
23	[XE] XEDTION 파스텔 게시판 설정 중 분류에 대해 문의드립니다. [3]	2023/11/06

제목

날짜

본 게시판의 용도

2024/06/11

[XE]

[EOND] 스케치북 기반 유튜브 스킨 설치 후 설정부분에서.. [3]

2023/03/20

[기타]

[최근게시물] 유투브 출력 위젯을 구매했는데 위젯 다운은 어디서 받나요?

2023/03/22

[XE]

eondZenithworld Layout 구매후 설정 적용이 안되는 것 같습니다. [4]

2023/04/05

[XE] 프로젝트 관리는 어떻게 하나요?

2023/06/08

[XE] 코노리 콘텐츠 모듈(contents) 발생 오류 [2]

2023/06/09

[XE] 라이믹스(XE)에서 견적의뢰 게시판을 만들고 싶습니다. 어떤 위젯 혹은 모듈을 써야 하나요? [1]

2023/06/13

[XE] 디비 쿼리문 질문

2023/06/27

[XE] 라이믹스 2.1.2 + PHP8.0.3 에러로그입니다.

2023/07/16

[XE]

성인인증화면 [2]

2023/08/06

[기타]

‘민관협력 디지털 사회 혁신 지원체계 구축운영 사업’ 관련 협조 문의

2023/08/16

[XE]

소상공인 및 자영업자를 위한 커뮤니티 사이트 제작용 테마 패키지 [4]

2023/08/27

[XE]

XEDTION 파스텔 게시판 설정 중 분류에 대해 문의드립니다. [3]

2023/11/06

이온디

확장컴포넌트 클릭하면 인용구작성이라고 있습니다..
안보이면 관리페이지에서 활성화 시키면 됩니다.
출처 : https://xe1.xpressengine.com/index.php?mid=qna&document_srl=18343301&m=0

인용구작성 에디터컴포넌트
다운로드 : https://xe1.xpressengine.com/index.php?mid=download&package_id=18324273

설명
글 작성시 글의 내용 중 일부를 인용구로 표시하거나 접고/ 펴기 기능을 부여하는 에디터 컴포넌트입니다.

사용방법
./modules/editor/components/quotation

라이선스
LGPL v2

에러내용
Uncaught TypeError: opener.editorGetSelectedHtml is not a function
at insertQuotation (popup.js?20150519155407:118)
at HTMLAnchorElement.onclick (index.php?module=editor&act=dispEditorPopup&editor_sequence=441040&component=quotation&mid=qna:213)

스크린샷

.... 오류로 사용 불가능하군요..쓰읍~

에디터에서 선택 영역을 컴포넌트로 불러올 때, 굵은 표시 참고
function getText() {
// 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
var fo_obj = xGetElementById("text_form");
var text = opener.editorGetSelectedHtml(opener.editorPrevSrl);
if(text==undefined) text = "";
text = text.replace(/<([^>]*)>/ig,'').replace(/</ig,'<').replace(/>/ig,'>').replace(/&/ig,'&');
fo_obj.contents.value = text;
return;
}
xAddEventListener(window, "load", getText);

컴포넌트의 HTML 내용을 에디터에 적용할 때

/* 부모창의 위지윅 에디터의 선택된 영역의 글자색을 변경 */
function completeCreateLink() {

var sHTML = preview.innerHTML;

opener.editorFocus(opener.editorPrevSrl);

var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)

opener.editorReplaceHTML(iframe_obj, sHTML);
opener.editorFocus(opener.editorPrevSrl);

self.close();
}

출처 : http://simulz.kr/xe/board_xe_manual/1871

라르게덴님께 지원 요청을;;
https://romanesque.me/forum/17051

오후 01:01

댓글

댓글 삭제
닫기

이온디

확장컴포넌트 클릭하면 인용구작성이라고 있습니다.. 안보이면 관리페이지에서 활성화 시키면 됩니다. 출처 ...

2021.08.30 13:01

취소
이온디

보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다.
근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다.
바로 <details> 와 <summary> 코드인데요.

<details>코드만 적용해도 아래와 같이 적용됩니다.
<details>
<p>details코드만 적용</p>
</details>

<details> 와 <summary> 코드를 같이 적용하면
<details>
<summary>Click Me!</summary>
<p>details, summary 같이 적용</p>
</details>
Click Me!
근데 위와 같이 보이지는 않고 상단의 세부정보 같이 보입니다.
아래의 css가 적용되어져 그렇습니다.

자! 그럼 css까지 같이 구현해 볼까요.
<details>
<summary>Click Me!!!</summary>
<div class="tpt">details 과 summary 그리고 css까지 적용</div>
</details>

<style>
details { margin:5px 0 10px; }
details > summary { background:#444; color:#fff; padding:10px; outline:0; border-radius:5px; cursor:pointer; transition:background 0.5s; text-align:left; box-shadow: 1px 1px 2px gray;}
details > summary::-webkit-details-marker { background:#444; color:#fff; background-size:contain; transform:rotate3d(0, 0, 1, 90deg); transition:transform 0.25s;}
details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg);}
details[open] > summary { background:#444;}
details[open] > summary ~ * { animation:reveal 0.5s;}
.tpt { background:#444; color:#fff; margin:5px 0 10px; padding:5px 10px; line-height:25px; border-radius:5px; box-shadow: 1px 1px 2px gray;}
@keyframes reveal {
from { opacity:0; transform:translate3d(0, -30px, 0); }
to { opacity:1; transform:translate3d(0, 0, 0); }
}
</style>
Click Me!!!

간단하죠 근데 아쉽게도 익스플로러에서는 작동하지 않습니다.
익스에서는 그냥 펼쳐저 보입니다.

처음 부터 펼쳐져 보이게 하는 옵션도 간단합니다.
<details open>
<p>details에 open만 적용</p>
</details>
details에 open만 적용

익스만 신경 쓰이지 않는다면 접고, 펼치는 폴딩기능을 구현하는데는 정말 유용한 코드입니다.
그리고 게시판에서도 소스만 적용하면 간단히 구현됩니다.

출처 : https://marshall-ku.com
(https://moonhouse.co.kr/html/529065)

오후 01:02

댓글

댓글 삭제
닫기

이온디

보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다. 근데 js없이 Html과 Css...

2021.08.30 13:02

취소

인용구작성 에디터컴포넌트

해시태그 디렉터리

이온디 랩 바로가기

질문과 답변 바로가기

최근 댓글

최근 추천글

지금 이순간

요즘 태그

오늘의 핫게시물

추천마켓상품 바로가기

제작의뢰/AS요청 바로가기

호스팅신청 바로가기