TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다.

몇일 전 국내 xhtml 에디터를 소개해 드렸습니다. 오늘 소개해드리고 싶은 TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다.는 해외 유명 웹디자인 블로그 leigeber.com입니다. 🎜 >간단하고 사용하기 쉬운 HTML WYSIWYG 편집기가 출시되었습니다.

TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다.에는 다음과 같은 기능이 있습니다

Javascript로 작성되었으며 다른 라이브러리에 의존하지 않습니다
이것은 경량 편집기이며 호출할 파일은 8kb에 불과합니다
대부분의 HTML 형식 요구 사항을 처리할 수 있으며 내장된 기능을 통해 생성된 마크업을 최대한 간결하게 만듭니다.
편집기에 사용되는 작은 아이콘은 CSS Sprite 기술을 사용하여 http 연결을 줄입니다.
주요 브라우저에서 테스트 및 통과
• 크리에이티브 커먼즈 라이센스 에 따라 개인 또는 상업 프로젝트에 사용할 수 있습니다.

사용 방법은 다음과 같습니다.

웹페이지 파일에는 TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다.에서 제공하는 js 파일과 css 파일을 참고하세요
실제로는 텍스트 영역인 웹페이지 파일에 편집자가 요구하는 태그를 다음과 같이 추가합니다.

2. <span style="COLOR: #009900"><<span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span> <span style="COLOR: #000066">id</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"input"</span> <span style="COLOR: #000066">style</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"width:400px; height:200px"</span>><<span style="COLOR: #66cc66">/</span><span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span>></span>

   텍스트 영역에 정의된 길이와 너비는 편집기의 크기입니다.

스크립트를 통해 편집기를 초기화하고 다음과 같이 다양한 매개변수를 구성합니다.

3. <span style="FONT-WEIGHT: bold; COLOR: #003366">new</span> TINY.<span style="COLOR: #660066">editor</span>.<span style="COLOR: #660066">edit</span><span style="COLOR: #009900">(</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span><span style="COLOR: #009900">{</span>
   	id<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'input'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (必须)上面第二步中定义的textarea的id</span>
   	width<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">584</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器宽度</span>
   	height<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">175</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器高度</span>
   	cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'te'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器的class，用来通过css控制样式</span>
   	controlclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tecontrol'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器上按钮的class</span>
   	rowclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'teheader'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮行的class</span>
   	dividerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tedivider'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮间分割线的样式</span>
   	controls<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'bold'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'italic'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'underline'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'strikethrough'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'subscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'superscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'orderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unorderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'outdent'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'indent'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'leftalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'centeralign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'rightalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'blockjustify'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unformat'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'undo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'redo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'n'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'font'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'size'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'style'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'image'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'hr'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'link'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unlink'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'cut'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'copy'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'paste'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'print'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线</span>
   	footer<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 是否显示编辑器底部</span>
   	fonts<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'Verdana'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Arial'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Georgia'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Trebuchet MS'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>  
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器中可选择的字体</span>
   	xhtml<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器生成xhtml还是html标记</span>
   	cssfile<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'style.css'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 要为编辑器附加的外部css文件</span>
   	content<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'starting content'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域中的初始内容</span>
   	css<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'body{background-color:#ccc}'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域背景</span>
   	bodyid<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑区域ID</span>
   	footerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tefooter'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器底部class</span>
   	toggle<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>text<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'源代码'</span><span style="COLOR: #339933">,</span>activetext<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'可视化'</span><span style="COLOR: #339933">,</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'toggle'</span><span style="COLOR: #009900">}</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置源代码浏览切换文字，及切换按钮的class</span>
   	resize<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'resize'</span><span style="COLOR: #009900">}</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器大小调整按钮的class</span>
   <span style="COLOR: #009900">}</span><span style="COLOR: #009900">)</span><span style="COLOR: #339933">;</span>

   구성 가능성이 높고, 구성 항목이 비교적 명확하다고 할 수 있습니다.

실제 TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다. 애플리케이션에서는 편집기 콘텐츠를 제출하기 전에 편집 영역의 최신 시각적 콘텐츠가 표시된 텍스트로 변환되는지 확인하기 위해 instance.post() 함수를 호출해야 한다는 점에 유의해야 합니다.

예시 보기: http://sandbox.leigeber.com/tinyeditor/
다운로드: TinyEditor는 간단하고 사용하기 쉬운 HTML WYSIWYG editor_HTML/Xhtml_webpage 제작입니다. 소스 코드 및 샘플 파일