본문 바로가기
C#

asp.net7 - 게시판(+Trumbowyg 라이브러리 추가)

오땡자 2020. 10. 10. 09:38

https://alex-d.github.io/Trumbowyg/

 

Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode

Lorem ipsum dolor sit amet, consectetur adipiscing elit, some text bold sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

alex-d.github.io

<설치할때 연관되있는것?>

NPM : Node Package Manager (Node.js)

Bower

 

* 나는 그냥 zip 다운받아서 라이브러리 파일에 넣어줌

 

<알쓸잡>

* Node.js란? - 자바스크립트로 백단 구현한것

* Bower - 프론트엔트에서 사용(부트스트랩,폰트어트..?)

* momentjs - 시간 관리 라이브러리(자바스크립트)

 

 

 

***라이브러리 추가 시 _Layout.cshtml에 추가해줘야 한다.***

 

 

 

보통 홈페이지에 자세히 나와있음

 

<설치법>

1. 홈페이지의 zip 파일 다운

2. _Layout.cshtml파일에 css,js추가 태그 (this로 표시한곳)

더보기
더보기 
@using Microsoft.AspNetCore.Http

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Join</title>

    <environment include="Development"> <!--개발-->
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/lib/trumbowyg/dist/ui/trumbowyg.min.css"/><!--this-->
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        KR
        asp.net




        9+

        아바타 이미지



        18/35
        [ASP.NET MVC] 8. 회원가입 기능 만들기
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Join</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Note" asp-action="Index">게시판</a></li>
                </ul>
                <ul class="nav navbar-nav navber-right">
                    @if (Context.Session.GetInt32("User_Loing_Key") == null)
                    {
                        <li><a asp-area="" asp-controller="Account" asp-action="Login">로그인</a></li>
                        <li><a asp-area="" asp-controller="Account" asp-action="Join">회원가입</a></li>
                    }
                    else
                    {
                        <li><a asp-area="" asp-controller="Account" asp-action="Logout">로그아웃</a></li>

                    }

                </ul>
            </div>
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2020 - Join</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/lib/trumbowyg/dist/trumbowyg.min.js"></script><!--this-->
        <script src="~/lib/trumbowyg/dist/langs/ko.min.js"></script><!--this(한국어 번역)-->
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

3. wwwroot- js폴더 - site.js안에 함수 삽입

$('.editor').trumbowyg({
    lang: 'ko'//언어 : 한국어
});

4. 원하는곳에 선언해주기

ex) class="editor"

 

5. 결과물 조회할때 HTML 태그로 나오는거 번역하기

 @Html.Raw(Model.NoteContent)<!--@HTML.Raw(model.변수명)-->

 

'C#' 카테고리의 다른 글

asp.net7 - 게시판(+Trumbowyg 라이브러리 추가)  (0) 2020.08.11
asp.net 6 - 게시판, 세션  (0) 2020.08.09
.net - 회원가입&로그인 (5)  (0) 2020.08.04
.net 강의3 - MSSQL DB연동  (0) 2020.07.28
asp.net4 - 데이터베이스 생성하기  (0) 2020.07.28

'C#' Related Articles

티스토리툴바