TinyMCE 기본 예제

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/javascript/tinymce-basic-example

이 게시물에서는 Bootstrap 5에서도 흥미로운 기본 예제와 함께 TinyMCE를 설치하는 방법을 공유하고 있습니다.

TinyMCE는 콘텐츠 생성이 단순하기 때문에 많은 기업과 개발자가 사용하는 가장 진보된 WYSIWYG HTML 편집기입니다. TinyMCE의 또 다른 장점은 작동하는 데 라이브러리가 필요하지 않은 독립 실행형입니다.

WYSIWYG HTML 편집기가 필요한 블로그, 이메일 템플릿 및 페이지 템플릿과 같은 작업을 개발하는 경우 TinyMCE가 적합합니다.

TinyMCE를 처음 사용하는 경우 설치 방법에 대한 단계가 있습니다.

1단계: 최신 버전의 TinyMCE를 다운로드합니다.



TinyMCEhere를 다운로드합니다.

2단계: 이 자바스크립트 코드를 js 파일이나 헤드 스크립트 태그에 넣습니다.




tinymce.init({
      selector: 'textarea#tinymce',
      plugins: [
           "advlist autolink lists link image charmap print preview anchor",
           "searchreplace visualblocks code fullscreen",
           "insertdatetime media table paste codesample"
      ],
      toolbar:"undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",
     font_formats:"Segoe UI=Segoe UI;",
     fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
     height: 600
});


3단계: 전체 코드는 다음과 같습니다.




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic on TinyMCE</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="assets/plugins/tinymce/js/tinymce.min.js"></script>

    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea#tinymce',
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste codesample"
            ],
            toolbar:
                "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",
            font_formats:"Segoe UI=Segoe UI;",
            fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
            height: 600
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <form method="post">
            <div class="form-group">
                <label>Title</label>
                <input type="text" name="title" class="form-control">
            </div>
            <div class="form-group mt-4">
                <label>Content</label>
                <textarea id="tinymce"></textarea>
            </div>

            <button class="btn btn-primary mt-4">Submit</button>
        </form>
    </div>

</body>
</html>


이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/javascript/tinymce-basic-example를 방문하십시오.

행복한 코딩 :)

좋은 웹페이지 즐겨찾기