SvelteKit에서 편집 가능한 HTML 콘텐츠 만들기

다음과 같은 경우에 읽으십시오:
  • SvelteKit 및 기능에 대해 알고 싶습니다.

  • 소개
    무슨 생각하는지 알아, 이게 뭐야? 그래서 TailwindCSS용 드래그 앤 드롭 페이지 빌더를 찾다가 시작하게 되었습니다. 구성 요소를 드래그 앤 드롭할 수 있는 기능을 찾았지만 페이지에서 편집하면 이와 같은 문제에 대해 뭔가를 할 수 있을지 생각하게 되었고 SvelteKit이 릴리스되었을 때 해당 기능 중 하나contenteditable를 발견했습니다.

    이 기능을 사용하면 html을 건드리지 않고 이동 중에 콘텐츠를 편집할 수 있습니다. 원하는 만큼 콘텐츠를 변경할 수 있습니다.

    코드 예는 다음과 같습니다. Click here

    이것은 작동하는 비디오의 예입니다(여기에서 웹에서 변경된 텍스트를 볼 수 있으며 순풍 플레이에서 증거와 함께 라이브로 보여주었습니다). Click Here to watch

    내가 어떻게 했어?
  • 먼저 기본 템플릿으로 시작한 다음 tailwind css를 내 프로젝트에 추가했습니다(읽는 방법을 알고 싶다면 .
  • 그런 다음 다음 코드 줄을 추가했습니다. 여기에서는 클립보드에 쉽게 복사할 수 있는 추가 패키지svelte-clipboard를 사용하고 있습니다.

  • 
    
    <script>
    import Clipboard from "svelte-clipboard";
    
    let editableHtml = `
    <div class="relative w-full">
        <nav class="fixed z-10 w-full border-b bg-white md:absolute md:bg-transparent">
            <div class="container m-auto px-2 md:px-12 lg:px-7">
                <div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0">
                    <div class="w-full px-6 flex justify-between lg:w-max md:px-0">
                        <a href="/" aria-label="logo">
                            <img src="https://tailus.io/sources/blocks/ecommerce-mood/preview/images/logo.svg" class="w-36" alt="tailus logo" width="144" height="68">
                        </a>
    
                        <button aria-label="humburger" id="hamburger" class="relative w-10 h-10 -mr-2 lg:hidden">
                            <div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 m-auto rounded bg-gray-500 transtion duration-300"></div>
                            <div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
                        </button>
                    </div>
    
                    <div class="hidden w-full lg:flex flex-wrap justify-between items-center space-y-12 p-6 rounded-xl bg-white md:w-8/12 md:space-y-0 md:p-0 md:flex-nowrap md:bg-transparent lg:w-7/12">
                        <div class="block w-full">
                            <ul class="space-y-12 tracking-wide font-medium md:flex md:space-y-0">
                                <li>
                                    <a href="/" class="block md:px-3">
    <div class="relative text-cyan-800
                before:absolute before:-bottom-7 before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800">
        <span>Nike</span>
    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="/" class="block md:px-3 group">
                                        <div class="relative text-gray-600
                                                    before:absolute before:-bottom-7 before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
                                            <span class="transition group-hover:text-cyan-700">Adiddas</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="/" class="block md:px-3 group">
                                        <div class="relative text-gray-600
                                                    before:absolute before:-bottom-7 before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
                                            <span class="transition group-hover:text-cyan-700">Cart</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
    
                        <div class="w-full md:w-max">
                            <button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition bg-gray-900 hover:bg-cyan-500 active:bg-cyan-600 focus:bg-cyan-800 sm:w-max">
                                <span class="block text-white text-sm">
                                    Shop now
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <div class="border-b">
            <div class="container m-auto px-6 pt-24 border-r border-l md:px-12  lg:pt-[4.8rem] lg:px-7">
                <div class="flex items-center flex-wrap gap-12 px-2 md:px-0">
                    <div class="lg:w-6/12 lg:-ml-7">
                        <div class="relative">
                            <img src="https://tailus.io/sources/blocks/ecommerce-mood/preview/images/shoes2.jpg" alt="shoes" loading="lazy" width="640" height="640">
                            <div class="absolute bottom-2 right-2 bg-white">
                                <div class="flex p-1">
                                    <button aria-label="button-left" class="p-3 border-r">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="rotate-180 bi bi-chevron-right" fill="currentColor" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                                        </svg>
                                    </button>
                                    <button aria-label="button-right" class="p-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="relative lg:w-6/12 lg:-ml-20">
                        <h1 class="font-bold text-5xl sm:text-6xl md:text-7xl xl:text-8xl">A Look for every <span class="text-cyan-800">mood</span>.</h1>
                        <div class="mt-16 space-y-8 lg:ml-32">
                            <p class="text-gray-700">Sit amet consectetur adipisicing elit. eligendi tenetur nihil quaerat suscipit, sunt dignissimos.</p>
                            <div class="flex space-x-4 ">
                                <button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition duration-300 bg-gray-900 hover:bg-cyan-500 active:bg-cyan-600 focus:bg-cyan-800 sm:w-max">
                                    <span class="block text-white text-sm">
                                        Shop now
                                    </span>
                                </button>
                                <button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition border border-gray-200 sm:w-max">
                                    <span class="block text-gray-800 text-sm">
                                        View store
                                    </span>
                                </button>
                            </div>
                        </div>'
                    </div>
                </div>
            </div>
        </div>
    </div>`
    </script>
    
    <div
        contenteditable="true"
        bind:innerHTML={editableHtml}
    ></div>
    
    <div class="grid items-center px-20">
    <Clipboard
      text={editableHtml}
      let:copy
      on:copy={() => {
        alert('Has Copied');
      }}>
      <button class="my-5 rounded-full px-4 py-2 border border-1 flex justify-center" on:click={copy}>Copy</button>
    </Clipboard>
    </div>
    


    이제 위의 코드에 대해 설명하겠습니다.
  • 먼저 스크립트 태그 내에서 패키지에서 클립보드를 가져왔습니다. 내 html을 editableHtml에 할당했습니다(여기서는 Tailus Hero Section입니다).
  • 그런 다음 웹 페이지에서 콘텐츠를 편집할 수 있게 하고 html 개체divcontenteditable에 바인딩하는 editableHtml가 있는 innerHTML를 만들었습니다.

  • <div
        contenteditable="true"
        bind:innerHTML={editableHtml}
    ></div>
    


  • 결국 Clipboard를 사용하여 내 프로젝트에서 사용하기 위해 변경된 텍스트를 복사했습니다.

  • 그게 다야, 다른 데이터로 동일한 종류의 템플릿을 가질 수 있도록 자신의 용도로 드래그 앤 드롭 웹 사이트 빌더를 만드는 방법입니다.

    이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.

    좋은 웹페이지 즐겨찾기