보이는 편집기와 같은 소스 미디어

나는 원래 정한 날짜인 2020년 4월 19일까지 2019년 관상바이러스 질병이 스위스에서 검역을 중지할 것을 공유했다.첫 번째 이정표가 이틀 남았다.미래에 더 좋은 날이 있기를 바랍니다.
DeckDeckGo의 프레젠테이션 편집기에 대해 우리는 Stencil을 사용하여 개발한 맞춤형 소스 웹 구성 요소를 많이 개발했다.
그 중 하나는 보이는 편집기와 유사한 미디어이다.그것은 어떤 현대 인터넷 응용 프로그램에도 통합될 수 있으며, 기술이 어떻든지 간에, 그리고 어떤 장치(데스크탑, 태블릿PC, 모바일 장치)에서도 일할 수 있다.

사실상, 나는 내가 이 구성 요소를 공유했는지 확실하지 않지만, 내가 하루의 시간을 써서 그 구성 요소를 개선하고, 그것에 주목할 만한 것을 가져다 주었고, 새로운 버전을 발표했다. 이것이 바로 내가 이 새로운 블로그 글에서 너와 그것을 공유한 이유이다.😉.
업데이트: 2022년에 이 구성 요소는 Stylo에서 이동하고 통합되었습니다.

설치

우리는 documentation에서 약간의 지도를 제공했고, Stencil은 frameworks에 어떤 구성 요소를 설치하는지 보여 주었다.

CDN에서 설치

CDN에서 Unpkg과 같은 구성 요소를 가져오려면 다음 내용을 HTML 제목에 추가합니다.

<script type="module" src="https://unpkg.com/@deckdeckgo/inline-editor@latest/dist/deckdeckgo-inline-editor/deckdeckgo-inline-editor.esm.js"></script>

<script nomodule="" src="https://unpkg.com/@deckdeckgo/inline-editor@latest/dist/deckdeckgo-inline-editor/deckdeckgo-inline-editor.js"></script>

NPM에서 설치

npm에서 프로젝트를 설치하려면 터미널에서 다음 명령을 실행합니다.

npm install @deckdeckgo/inline-editor

필요에 따라 가져오거나

import '@deckdeckgo/inline-editor';

또는 사용자 정의 로더를 사용합니다.

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/inline-editor/dist/loader';

deckDeckGoElement();

응용 프로그램에 구성 요소 추가

나는 구성 요소의 사용이 매우 간단하다는 것을 좋아한다.응용 프로그램에 추가하려면 DOM에 추가하기만 하면 됩니다.

<deckgo-inline-editor></deckgo-inline-editor>

이렇게 하면 프로그램에서 보이는 편집기를 추가했습니다🎉.

편집 가능한 요소

기본적으로 구성 요소는 속성 h1을 정의하는 모든 요소 h2, h3, h4, h5, h6, div 및 contenteditable을 편집할 수 있습니다.
만약 당신이 우리의 편집기를 좋아한다면, 우리는 section의 내용을 처리하고, containers 속성의 도움으로 이 목록을 덮어쓸 수 있습니다.

<deckgo-inline-editor containers="h1,h2,section">
</deckgo-inline-editor/>

보시다시피 제가 이렇게 하면 다음 단락(p)은 더 이상 편집할 수 없습니다. 설령 그것이 contenteditable으로 설정된다 하더라도.

컨테이너 요소

응용 프로그램의 특정 부분과만 상호작용을 허용하고 모든 문서와는 상호작용을 허용하지 않기를 원할 수 있습니다.이를 위해 속성 attachTo도 공개했다.만약 당신이 제공하기를 원한다면, 특정 용기에서 온 마우스나 터치 이벤트만 고려할 것입니다.

모바일 장치

모바일 장치에서 부동 편집기를 사용하는 것은 가장 좋은 사용자 체험이 아닐 수도 있다.사용자가 장치에서 텍스트를 선택하면 편집기와 충돌할 수 있는 시스템 운영 체제 옵션 (복사, 붙여넣기 등) 의 기본 목록이 자동으로 표시됩니다.
이것이 바로 우리가 편집기를 이동 장치에 선택적으로 붙이려고 하는 이유다.

<deckgo-inline-editor containers="h1,h2,section"
                      sticky-mobile="true">
</deckgo-inline-editor>

편집기는 iOS에서 상단, Android에서 하단에 표시됩니다.나는 이전 버전을 매우 좋아하지만, 나는 iOS에서 이 문제를 해결할 똑똑한 방법을 찾지 못했다. 왜냐하면 인터넷 보기가 크기를 조정하지 않아서, 키보드 크기도 접근할 수 없기 때문이다.

마찬가지로 도구 모음을 표시할 때 구성 요소는 이벤트 stickyToolbarActivated을 보냅니다.이 이벤트를 통해 프로그램의 눈썹이나 꼬리를 숨기고 두 층의 작은 디자인 문제를 피할 수 있습니다.

목록 및 정렬

당기기 요청을 제공했기 때문에, 우리는 최근에 정렬 수정 기능을 추가했다.모든 영웅이 망토를 쓰는 것은 아니다!
그럼에도 불구하고, 우리의 편집기에서, 우리는 그것들을 사용하지 않는다. 왜냐하면 우리는 주 도구막대에서 이 두 가지 옵션을 제공했기 때문이다.구성 요소가 list과 align의 두 가지 속성을 공개하여 사용하지 않도록 하는 이유입니다.
마찬가지로 기본적으로 구성 요소는 그림을 고려하지 않습니다.다른 속성 img-editable의 도움말로 수정할 수 있습니다.

<deckgo-inline-editor containers="h1,h2,section"
                      sticky-mobile="true"
                      list="false"
                      align="false"
                      img-editable="true">
</deckgo-inline-editor>

색깔

색상은 사용자 정의 색상 선택기의 도움으로 수정할 수 있습니다.기본 팔레트가 있지만 해당 속성 palette으로 덮어쓸 수도 있습니다.

RTL 회사

응용 프로그램의 방향이 오른쪽에서 왼쪽이면 구성 요소 순서는 변하지 않지만 정렬 기능은 자동으로 표시되고 기본값에 따라 표시됩니다.

CSS 사용자 정의

계산은 하지 않았지만, 특히 색상, 배경, 선택과 관련된 모든 구성 요소의 스타일을 설정하는 데 사용할 수 있는 CSS 변수가 많습니다.
이것들은 우리의 documentation에 표시됩니다.
여느 때와 마찬가지로 일부 기능이 부족하거나 필요하면 GitHub으로 전화하십시오.또한 Pull 요청이 가장 인기가 높습니다.😁.

더 많이...

사용자 정의 동작을 제공하거나 데스크톱에서도 구성 요소를 붙일 수 있는 옵션이 더 있습니다.

총결산

솔직히 말해서, 이것은 내가 개발한 가장 복잡한 구성 요소일 수도 있다.나는 사실상 그늘과 Selection API이 그렇게 우호적이지 않고 일을 쉽게 만들지 않았다고 생각한다.비록 나는 결과에 대해 만족을 느낀다. 그러나 그것은 우리의 editor에서 잘 운행되고 있다. 나는 언젠가 그것도 일부 지역의 사람들에게 유용할 수 있기를 바란다.
집에 있어라, 안전에 주의해라!
데이비드
표지 사진은 Silviana Toader에서 Unsplash으로 촬영되었다