BLANK, NULL AND BLACK

WYSIWYG EDITOR

WEB2017. 12. 12. 14:19

사이드 프로젝트에 사용할 무료 위지윅 에디터를 찾고 있다.


네이버의 스마트 에디터나 다음(지금은 다음카카오)의 다음 에디터가 있었는데

이제는 지원이 끊긴듯 하다.


이런 기능은 있었으면 좋겠다 라고 생각하는 것이

테이블 그리기 와 소스뷰 그리고 본문에 사진 삽입 인데 하나씩 찾아보자.


1.TinyMCE

- 외산 에디터이지만 위에서 말한 국내 대형 포털에서 에디터를 무료 배포하던 시절부터 인기가 많았던걸로 기억한다.

- 지금은 커뮤니티 버전(무료)과 상용버전으로 따로 구분해서 배포 하는 듯 하다.

- 단순 개발용(사이드 프로젝트)이 아닌 퍼블릭한 어떤 서비스 제공을 목적으로 하는 거라면 라이선스를 검토해 볼 것.

- 테이블, 소스뷰, 사진삽입 가능

https://www.tinymce.com/


2.CKEditor

- TinyMCE 와 쌍벽을 이루던 외산 에디터.

- 역시나 오픈소스버전(무료)과 상용버전으로 구분하여 배포중. 사용용도에 따라 라이선스 내용 검토해 볼 것.

- 테이블, 사진삽입 기능은 확인. Documentation 에는 소스뷰 기능이 있다고는 하나 아직 확인 못했음.

https://ckeditor.com/


3.Trumbowyg

- Alex-D 라는 필명을 사용하는 사람이 개인적으로 만든 에디터 인 듯 하다.

- 꽤나 깔끔한 디자인과 꿀리지 않는 기능

- 사진삽입(Url을 통한), 소스뷰 기능이 기본, 플러그인을 통해 테이블과 컴퓨터에 이미지를 업로드 하는 기능을 추가 하는 듯.

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


4.textbox.io

- 검색하다 갑자기 튀어나온 녀석인데 꽤나 깔끔해보인다.

- 무료 커뮤니티 버전과 상용버전으로 구분. 용도에 따라 라이선스 검토해 볼 것.

- 테이블, 사진삽입, 소스뷰 모두 제공

https://textbox.io/


5.summernote

- 이름 답게 심플하고 시원한 디자인

- 부트스트랩 js 와 css 를 사용하는데 별생각 없이 사용 했다가 클래스 이름이 겹쳐서 다른 걸로 갈아탐.

- 이름 짓는게 좀 큰 일인데, 머리속에 떠오르는 이름을 대부분 부트스트랩에서 사용하고 있음. (나한텐 큰 단점)

- 남부러울것 없는 테이블, 사진삽입, 소스뷰 모두 제공

- https://summernote.org/


6.Quilljs

- 디자인 보고 반했지만, 원하는 기능 부족으로 그냥 보고만 있는 에디터.

- 이미지 삽입 기능은 기본 탑재 되어 있지만, 테이블과 소스뷰 기능을 아무리 찾아도 보이지 않음.

https://quilljs.com/


7.froala

- 이쁘고 기능도 맘에 듬.

- 하지만, 역시나 무료 버전은 없다. 이쁘고 맘에 드는건 반드시 대가를 치름.

- 물론 위에 무료이면서 이쁘고 좋은 기능을 가진 에디터도 많음. 하지만 왠지 돈을 낸다면 더 좋을거 같은 느낌.

- 무료 버전은 없지만, 신기하게도 다운로드는 무료로 가능함.

- Helper Center 에 이런 배포 방식에 대해 의문을 제기한 내용이 있는데, 개발과정에서 테스트&통합 하라는 개발자측의 배려.

-- https://wysiwyg-editor.froala.help/hc/en-us/articles/115003389089-Why-can-I-download-the-editor-if-it-s-not-free-

- 테이블, 이미지삽입, 소스뷰 모두 제공

- https://www.froala.com/



위에 기재된 에디터들 전부는 사용해보지 못했습니다.

참고 정도로만 활용해 주세요.

'WEB' 카테고리의 다른 글

ASP.NET Core minimal template  (0) 2017.11.09
셀 크기 조절  (0) 2017.06.07
잠재적 위험이 있는 Request.Form ASP.NET MVC4  (0) 2015.10.15

비주얼스투디오2017, 비주얼스투디오코드에서 mvc 템플릿을 생성하면

ms 에서 제공하는 데모사이트(?)가 같이 생성된다.

 

신경 안쓰고 그냥 다 지우고 시작하거나

아니면 컨트롤러 부터 하나 새로 만들어서 시작하면 되겠지만

테스트 또는 실습을 위해 프로젝트를 몇개씩 만들때는 은근히 귀찮아진다.

(제이쿼리 라이브러리, 원치 않는 레이아웃 등 다른 파일들도 은근히 많음)

 

빈 템플릿을 만들고 싶은데 왜 자꾸 데모를 끼워넣는지.

 

검색해보니 역시 양형들은 한발짝 아니 몇발짝 앞서있다.

그들은 Empty 템플릿이라 하지 않고 Minimal 템플릿이라 부르는거 같다.

 

구글에서 how to generate empty .net core mvc template 이라는 

아무렇게 단어조합 신공으로 검색하니 몇가지가 나왔다.

 

비주얼스투디오2017로 미니멀 프로젝트를 생성하는 방법과

비주얼스투디오코드로 미니멀 프로젝트를 생성하는 방법 두개가 나왔다.

(이 두가지만 알면 되지 않나?)

 

1.비주얼 스튜디오 2017 : https://www.iambacon.co.uk/blog/create-a-minimal-asp-net-core-2-0-mvc-web-application

간단히 과정을 설명하면 

1-1.프로젝트 생성화면에서 MVC 템플릿을 선택하지 않고 Empty를 선택해서 생성

1-2.Nuget 으로 MVC 관련 패키지를 설치

1-3.Startup.cs 파일 수정 / Controllers 폴더 생성 / Views 폴더 생성

1-4.컨트롤러 생성 및 뷰 생성은 기존과 동일

 

2.비주얼 스튜디오 코드 : https://social.technet.microsoft.com/wiki/contents/articles/40043.asp-net-core-2-0-mvc-from-scratch-empty-web-project-in-vs-code.aspx

2-1.터미널에서 dotnet new web 으로 프로젝트 생성

2-2.Startup.cs 파일 수정 / Controllers 폴더 생성 / Views 폴더 생성

2-3.컨트롤러 생성 및 뷰 생성은 기존과 동일

 

'WEB' 카테고리의 다른 글

WYSIWYG EDITOR  (0) 2017.12.12
셀 크기 조절  (0) 2017.06.07
잠재적 위험이 있는 Request.Form ASP.NET MVC4  (0) 2015.10.15

셀 크기 조절

WEB2017. 6. 7. 16:34

html 테이블에서 제일 윗줄의 td 를 colspan 을 사용하여 하나로 합치고

그 아래쪽부터 나눠지는 경우

각 셀의 width 지정이 먹히지 않는다. (티스토리에서는 잘 먹힘 ㅡ_ㅡ)


이럴땐 colgroup 을 사용하면 된다는 사실을 발견했다.

평소에 html 은 그냥 모양내기만 급급했는데, 이런걸 알아갈때 마다 

결코 쉬운게 아닌거 같다.


핵심내용만 여기에 기록하고

자세한 설명은 아래 주소로 들어가서 직접 보시길 바란다.


https://jeiel85.wordpress.com/2015/10/26/%EC%B2%AB-%EC%A4%84-colspan%EC%8B%9C%EC%97%90-table-%EC%82%AC%EC%9D%B4%EC%A6%88-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/



<table>
<colgroup>
<col style=”width:30%;”>
<col style=”width:30%;”>
<col style=”width:10%;”>
<col style=”width:30%;”>
</colgroup>
<tr>
<td></td>
<td colspan=”3″></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

'WEB' 카테고리의 다른 글

WYSIWYG EDITOR  (0) 2017.12.12
ASP.NET Core minimal template  (0) 2017.11.09
잠재적 위험이 있는 Request.Form ASP.NET MVC4  (0) 2015.10.15

대충 예상은 했었지만

많디 많은 글을 따라 하니 대부분.. 문제가 해결 되지 않았다.

(사실 글은 많았지만 대부분 같은 말을 하고 있었음)


구글링에 구글링,

나는 왜 VS를 영문판으로 설치 해서 사서 고생을 하는가 라는 의미 없는 짜증도 부렸었고..


A potentially dangerous Request.Form value was detected from the client (content="<p>aaa</p>").

클라이언트 (content="<p>ss</p>")에서 잠재적 위험이 있는 Request.Form 값을 발견했습니다.


혼자서 그룹웨어에서 사용되고 있는 전자결재 부분만 구현해 보자! 라는 생각으로

다음에디터를 이식하기 시작했다. (참고 삼아 보고 있는 그룹웨어 데모판에서 다음에디터를 사용하고 있었음)

에디터의 소스는(js) 무척이나 복잡 했지만 작동을 시키는 과정은 그리 어렵지 않았다.


본문 내용을 대충 작성하고 ("aaa") 섬밋을 시키니 위와 같은 오류가 나온다. 휴.... 

사실 오류라기 보단 경고를 해야 하는 상황 같은데 이상하게 다음 진행을 막아버린다.


한글로 번역하니 잠재적 위험이 있는 리퀘스트.폶 어쩌고 저쩌고..


Web.config 파일을 수정하라는 글이 제일 많고

어트리뷰트를 추가해서 해당 컨트롤러만 밸리데이트를 폴스 시키는 등의 글들도 있었다.


나는

닷넷4.0

ASP.NET MVC4


Web.config 파일도 두개다!

프로젝트의 루트 위치에 하나, 뷰 폴더에 하나

여기서 부터 햇갈렸던거 같다.


하나를 건드려 보니 증상은 그대로

다시 원상태로 만들거라고 추가한 부분을 지우고

다른 부분을 건드려보고,

역시나 해결이 안되고.. 반복;

스스로 고민에 빠지고

블로거들은 다 거짓말쟁이라며 자책과 비난을 하다가


Web.config 파일을 수정하고,

컨트롤러에 어트리뷰트도 추가를 해야된다 라는 글을 발견

의심이 많아서 바로 실행해 보진 않고

초점을 이쪽으로 잡고 검색.


https://msdn.microsoft.com/ko-kr/library/dd460533(v=vs.118).aspx (Web.config 수정)


http://cluster1.cafe.daum.net/_c21_/bbs_search_read?grpid=1O5PK&fldid=LTFI&contentval=0000Nzzzzzzzzzzzzzzzzzzzzzzzzz&nenc=&fenc=&from=&q=%C1%A6%C0%DB%C0%DA%C6%F7%B7%B3&nil_profile=cafetop&nil_menu=sch_updw&listnum=

(Web.config, Attribute 추가)


https://social.msdn.microsoft.com/forums/ko-KR/a0547cf4-51ce-4474-a1db-0982e7fb7222/aspnet-4-requestvalidationmode (Web.config, Attribute 추가)


종합해본 결과

두가지 방법을 혼합해 보자 해서 실행.

거짓말 처럼 html 태그 까지 그대로 디비에 잘 들어가네.


휴.. 

에디터를 매일 아니면 주기적으로 땠다 붙였다 하는 것이 아니기 때문에

분명히 다음에 할때 기억이 안날 거 같아서

여기에 이렇게 내 식대로 남겨놓는다.


참, Web.config 파일 수정은 뷰폴더에 있는 파일 말고!

프로젝트 루트에 있는 Web.config 파일임을 명심.



// 2016.05.30 추가 및 수정

Web.config 파일에 위에 나온 부분을 추가 하지 않아도, 

어트리뷰트만 추가하면 컨트롤러의 해당 메서드에 한해서만 유효성 검사를 하지 않고 진행한다.

[ValidateInput(false)]

게시판 글쓰기와 같이 HTML 태그가 포함된 내용을 서버측으로 전송 시키는 메서드에 사용하자.


'WEB' 카테고리의 다른 글

WYSIWYG EDITOR  (0) 2017.12.12
ASP.NET Core minimal template  (0) 2017.11.09
셀 크기 조절  (0) 2017.06.07