#프로알라에디터 5개의 스레드 ✕ 해제
이온디
이온디 1년 전
유튜브 링크를 가져올 때 바로 iframe으로 변환해주는 코드입니다. document.addEventListener("DOMContentLoaded", function () { const editor = document.querySelector(".fr-element"); if (editor) { editor.addEventListener("paste", function (event) { console.log('Paste event detec… 유튜브 링크를 가져올 때 바로 iframe으로 변환해주는 코드입니다. document.addEventListener("DOMContentLoaded", function () { const editor = document.querySelector(".fr-element"); if (editor) { editor.addEventListener("paste", function (event) { console.log('Paste event detected'); event.preventDefault(); // 클립보드 데이터 가져오기 let clipboardData = (event.clipboardData || window.clipboardData).getData("text"); // 유튜브 링크 정규식 let regex = /(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/; // 유튜브 링크에서 ?si= 파라미터를 제거 clipboardData = clipboardData.replace(/([?&])si=[^&]*/, ''); // 유튜브 링크를 iframe으로 변환 let newContent = clipboardData.replace(regex, function (match, p1, p2, p3, videoId) { // iframe을 생성하고 반환 return `<span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"> <iframe width="640" height="360" src="https://www.youtube.com/embed/`+videoId+`?wmode=opaque" frameborder="0" allowfullscreen class="fr-draggable"></iframe> </span><p>&nbsp;</p>`; }); // 변환된 내용 붙여넣기 document.execCommand("insertHTML", false, newContent); }); } });#프로알라에디터
이온디
이온디 1년 전
프로알라 에디터 상단 툴바 감추기 입니다. #프로알라에디터 #툴바 프로알라에디터는 XE, 라이믹스에서 사용할 수 있는 최고의 에디터입니다. 유료 에디터이기 때문에 많은 분들이 사용하실 수는 없겠지만, 사용하시는 분들이 소수겠지만, 그만큼 활용방법 또한 알려지지 않아서 아쉬운데요. 이온디에서 제작의뢰해드린 분께 설치해드린 적이 있는데 그 가치를 모르고 도메인을 없애버리시는 분들도 계셔서 아쉽네요. 1. 인라인설정 toolbarInline: true,2. 임베드 embedlyPaste: tr… 프로알라 에디터 상단 툴바 감추기 입니다. #프로알라에디터 #툴바 프로알라에디터는 XE, 라이믹스에서 사용할 수 있는 최고의 에디터입니다. 유료 에디터이기 때문에 많은 분들이 사용하실 수는 없겠지만, 사용하시는 분들이 소수겠지만, 그만큼 활용방법 또한 알려지지 않아서 아쉬운데요. 이온디에서 제작의뢰해드린 분께 설치해드린 적이 있는데 그 가치를 모르고 도메인을 없애버리시는 분들도 계셔서 아쉽네요. 1. 인라인설정 toolbarInline: true,2. 임베드 embedlyPaste: true,FAQ. 1. 파일 업로드시 오류가 발생했습니다. > 캐시 영향 등으로 시간이 캐시삭제를 하거나 시간이 좀 지나야 해당 게시물에 해당 현상이 발견되지 않습니다. 일시적인 현상으로 추측됨. 참조 1) https://xetown.com/topics/651487 2) https://xetown.com/tips/1718498#:~:text=%ED%95%B4%EB%8B%B9%20%EA%B8%B0%EB%8A%A5%EC%9D%84%20%ED%99%95%EC%9D%B8%ED%95%B4%EB%B3%B8%20%EA%B2%B0%EA%B3%BC%20%EB%9D%BC%EC%9D%B4%EB%AF%B9%EC%8A%A4%EC%97%90%EC%84%9C%20%ED%94%8C%EB%A1%9C%EC%95%8C%EB%9D%BC%20%EC%95%84%EC%9D%B4%EC%BD%98%EC%9D%84,%EC%97%90%EB%94%94%ED%84%B0%EC%99%80%20%EB%AA%A8%EB%93%88%20%EB%91%98%20%EB%8B%A4%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%20%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94!%20https://github.com
이온디
이온디 2년 전
라이믹스 2.1에서는 jQuery 버전을 선택할 수 있습니다. jQuery 2.2.4 jQuery 3.6.3 jQuery 3.6.3 을 선택하면, 프로알라 에디터에 에디터가 뜨지 않으니 사용 시 유의해주세요! 라이믹스 2.1에서는 jQuery 버전을 선택할 수 있습니다. jQuery 2.2.4 jQuery 3.6.3 jQuery 3.6.3 을 선택하면, 프로알라 에디터에 에디터가 뜨지 않으니 사용 시 유의해주세요!
이온디
이온디 4년 전
XE 글쓰기 화면에서 에디터의 소스를 복붙(Copy&Paste) 했을 때, 에디터에서와 마찬가지로 컬러 스키마가 적용되도록 하는 방법입니다. 아래 링크는 로마네스크의 라르게덴님께 질문한 글입니다. https://romanesque.me/forum/7319 highlight.js의 Tomorrow Night Bright 스킨을 적용하고 있습니다. 에디터에서 한다라기보단 스킨이나 레이아웃에서 적용하고 있고요. 사용 방법은 에디터는 달락 버튼에서 '코드'로 적용하고 글을 저장을 하게 되면 게시판 … XE 글쓰기 화면에서 에디터의 소스를 복붙(Copy&Paste) 했을 때, 에디터에서와 마찬가지로 컬러 스키마가 적용되도록 하는 방법입니다. 아래 링크는 로마네스크의 라르게덴님께 질문한 글입니다. https://romanesque.me/forum/7319 highlight.js의 Tomorrow Night Bright 스킨을 적용하고 있습니다. 에디터에서 한다라기보단 스킨이나 레이아웃에서 적용하고 있고요. 사용 방법은 에디터는 달락 버튼에서 '코드'로 적용하고 글을 저장을 하게 되면 게시판 본문에 highlight.js가 나타나게 되는 방식 입니다. 제가 적용한 방법입니다. <load target="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css" index="1" /> <load target="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" type="body" /> $(function(){ $(".xe_content pre").each(function(i, block) { hljs.highlightBlock(block); }); }); 에디터의 기능인 줄 알았는데, 게시판 스킨이나 레이아웃에서 적용해야하는 기능인 것 같네요. 에디터에서 설정하는 것이 아니라, 레이아웃 스킨에 적용해보았습니다. (매번 레이아웃을 새로 만드니 매번 설정을 해놔도 까먹네요) path : /httpdocs/layouts/el_sinchuk/layout.html <link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/androidstudio.css"> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/highlight.min.js"></script> <!-- and it's easy to individually load additional languages --> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/languages/go.min.js"></script> <script> $(function(){ $(".xe_content pre").each(function(i, block) { hljs.highlightBlock(block); }); // $(".fr-view pre").each(function(i, block) { // hljs.highlightBlock(block); // }); }); </script> <style> .fr-view pre, .xe_content pre{ padding: 1.6rem; border-radius: .8rem; font-size: 11px; font-family: "verdana"; line-height: 1.4; background: #282b2e; color: #a9b7c6; } .editor .fr-box{ flex:auto; } </style> highlight.js 공식사이트 https://highlightjs.org/ default.css 뿐만 아니라 다양한 스타일을 직접 골라 가져올 수 있습니다. 참조글 프로알라 에디터 붙여넣기 스타일 적용하는 방법 https://eond.com/xe/394232 #프로알라에디터 #FroalaEditor
이온디
이온디 6년 전
#에디터 #br #br태그 #프로알라에디터 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402" style="height: 250px;">https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 p, br, span, div 태그 https://romane… #에디터 #br #br태그 #프로알라에디터 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402" style="height: 250px;">https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 p, br, span, div 태그 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 예전에 제가 이런 글을 쓴 적이 있군요. -_-; 요지는, 프로알라에디터에서는 br 태그 대신 p 태그를 기본 띄어쓰기로 하고 있는데, 우리나라의 현실적 글쓰기에서는, p 태그가 아닌 br 태그가 더 적당하다. 그리고, p태그처럼 (본래 p태그의 역할은 영문에서의 한문단 띄우기이다.) 한 문단을 띄우고자 할 경우에, 우리는 보통 2칸을 띄우는데, 이때 ctrl+Enter 라던가, enter+enter 일 경우 자동 p 태그로 변환되던가 하는 게 더 낫지 않나. ...하는게 제 생각의 요지입니다.