상세 컨텐츠

본문 제목

CKEditor5 임시샘플

자바스크립트

by e7e 2024. 6. 18. 12:41

본문

일단은 임시 샘플...  이단은 정리 필요

이것은 제공되는 super preset

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      #container {
        width: 1000px;
        margin: 20px auto;
      }
      .ck-editor__editable[role="textbox"] {
        /* Editing area */
        min-height: 200px;
      }
      .ck-content .image {
        /* Block images */
        max-width: 80%;
        margin: 20px auto;
      }
      .jw {
        display: inline-block;
      }
    </style>
    <button style="font-size: 5em; cursor: pointer" onclick="fJiWon(1)">
      지원 멋졍?
    </button>
    <button style="font-size: 5em; cursor: pointer" onclick="fJiWon(0)">
      지원 바봉?
    </button>
    <div id="container">
      <div id="editor"></div>
    </div>
    <script>
      let jwEditor;
 
      function ranColor() {
        return ` rgb(
                  ${Math.round(Math.random() * 255)},
                  ${Math.round(Math.random() * 255)},
                  ${Math.round(Math.random() * 255)}
                 )`;
      }
 
      function fJiWon(isJW) {
        let jwPreData = jwEditor.getData();
        let jwRanNum = Math.ceil(Math.random() * 3) + 2;
        let jwNewData = `<div class="jw" style="color:${ranColor()};font-size:${jwRanNum}em">지원 바봉</div>`;
        if (isJW)
          jwNewData = `<div class="jw" style="color:${ranColor()};font-size:${jwRanNum}em">지원 멋졍</div>`;
 
        jwEditor.setData(`${jwPreData}${jwNewData}`);
      }
    </script>
 
    <!--
            The "superbuild" of CKEditor&nbsp;5 served via CDN contains a large set of plugins and multiple editor types.
            See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
        -->
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/super-build/ckeditor.js"></script>
    <script>
      // This sample still does not showcase all CKEditor&nbsp;5 features (!)
      // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
      CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
        // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
        toolbar: {
          items: [
            "exportPDF",
            "|",
            "findAndReplace",
            "selectAll",
            "|",
            "heading",
            "|",
            "bold",
            "italic",
            "strikethrough",
            "underline",
            "code",
            "subscript",
            "superscript",
            "removeFormat",
            "|",
            "bulletedList",
            "numberedList",
            "todoList",
            "|",
            "outdent",
            "indent",
            "|",
            "undo",
            "redo",
            "-",
            "fontSize",
            "fontFamily",
            "fontColor",
            "fontBackgroundColor",
            "highlight",
            "|",
            "alignment",
            "|",
            "link",
            "uploadImage",
            "blockQuote",
            "insertTable",
            "mediaEmbed",
            "codeBlock",
            "|",
            "specialCharacters",
            "horizontalLine",
            "|",
            "sourceEditing",
          ],
          shouldNotGroupWhenFull: true,
        },
        // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
        heading: {
          options: [
            {
              model: "paragraph",
              title: "Paragraph",
              class: "ck-heading_paragraph",
            },
            {
              model: "heading1",
              view: "h1",
              title: "Heading 1",
              class: "ck-heading_heading1",
            },
            {
              model: "heading2",
              view: "h2",
              title: "Heading 2",
              class: "ck-heading_heading2",
            },
          ],
        },
        // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
        placeholder: "지원 환영 CKEditor 5!",
        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
        fontFamily: {
          options: ["default", "Arial, Helvetica, sans-serif"],
          supportAllValues: true,
        },
        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
        fontSize: {
          options: [10, 12, 14, "default", 18, 20, 22],
          supportAllValues: true,
        },
        // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
        // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
        htmlSupport: {
          allow: [
            {
              name: /.*/,
              attributes: true,
              classes: true,
              styles: true,
            },
          ],
        },
        // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
        link: {
          decorators: {
            addTargetToExternalLinks: true,
            //   defaultProtocol: "https://",
            toggleDownloadable: {
              mode: "manual",
              label: "Downloadable",
              attributes: {
                download: "file",
              },
            },
          },
        },
        // The "superbuild" contains more premium features that require additional configuration, disable them below.
        // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
        removePlugins: [
          // These two are commercial, but you can try them out without registering to a trial.
          // 'ExportPdf',
          // 'ExportWord',
          "AIAssistant",
          "CKBox",
          "CKFinder",
          "EasyImage",
          // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
          // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
          // Storing images as Base64 is usually a very bad idea.
          // Replace it on production website with other solutions:
          // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
          // 'Base64UploadAdapter',
          "MultiLevelList",
          "RealTimeCollaborativeComments",
          "RealTimeCollaborativeTrackChanges",
          "RealTimeCollaborativeRevisionHistory",
          "PresenceList",
          "Comments",
          "TrackChanges",
          "TrackChangesData",
          "RevisionHistory",
          "Pagination",
          "WProofreader",
          // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
          // from a local file system (file://) - load this site via HTTP server if you enable MathType.
          "MathType",
          // The following features are part of the Productivity Pack and require additional license.
          "SlashCommand",
          "Template",
          "DocumentOutline",
          "FormatPainter",
          "TableOfContents",
          "PasteFromOfficeEnhanced",
          "CaseChange",
        ],
      })
        .then((editor) => {
          jwEditor = editor; // Save for later use.
        })
        .catch((error) => {
          console.error(error);
        });
    </script>
  </body>
</html>

 

실행 결과

 

Source 클릭

나 지금 머하징?

'자바스크립트' 카테고리의 다른 글

faker-js 이용 가짜(Dummy) 데이터 마궁 맹글깅(쪼메 바뀜)  (0) 2024.10.24
엑셀(Excel) 파일 다루는 SheetJS  (0) 2024.08.01
괘니 만들어보는 사이드 메뉴  (2) 2024.06.03
재미로 맹글어보는 오른쪽 슬라이딩 메늉  (0) 2024.05.30
IntersectionAPI 오디 한번 싸용해 보올깡  (0) 2024.04.16

관련글 더보기

티스토리툴바