이 기사에서는 Bootstrap-Wysiwyg 텍스트 편집기를 사용하여 편집자의 장점을 완전히 플레이하는 방법을 알려줍니다. 나는 당신이 무언가를 얻을 수 있기를 바랍니다.
주요 기능 :
매우 작은 5KB
자동 핫키 지원 (Mac 및 Windows)
드래그 앤 드롭 사진 삽입, 사진 업로드 지원 (휴대폰 사진 지원)
사운드 입력 지원 (크롬 지원)
사용자 정의 도구 모음이 모든 부트 스트랩 컨텐츠, 글꼴을 사용하도록 허용하십시오
필수 스타일이 사용되지 않습니다
………………………………………………………………………
사실, 그것은 그 이상입니다. 모두가 스스로 탐색해야합니다.
실제로 사용하는 것은 매우 간단합니다. 다음과 같이 부트 스트랩 관련 CSS, JS, JQuery 및 Bootstrap-Wysiwyg의 JS를 붓습니다.
<link href = "bootstrap-combined.no-icons.min.css"rel = "Stylesheet"> <link href = "bootstrap-responsive.min.css"rel = "Stylesheet"> <link href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css"rel = "stylesheet"> <link rel = "stylesheet"href = "index.css"type = "text/css"> <script src = "jquery1. type = "text/javaScript"> </script> <script src = "bootstrap.min.js"> </script> <scrc = "bootstrap-wysiwyg.js"type = "text/javaScript"> </script> <script src = "external/jquery.hotkeys.js"text/javascript ">
관련 메뉴 항목 및 방법을 정의하십시오.
함수 initToolbarbootstrapbindings () {var fonts = [ 'serif', 'sans', 'arial', 'arial black', 'courier', '택배', '코믹 산스 MS', '헬바 티카', '영향', '루시다 그란데', '루시다 산', '타임즈', 'verdanate', 'verdanate', 'times', 'times', 'times', 'times', 'times', 'times', 'times', 'times', $ ( '[title = font]'). 형제 ( '. Dropdown-Menu'); $ .Each (fonts, function (idx, fontname) {fonttarget.append ($ ( '<li> <a data-edit = "fontname' + fontname + '"style = "font-family :/' ' + fontname +'/'>' + fontname + '</a>');}); $ ( 'a [title]'). 툴팁 ({컨테이너 : 'body'}); $ ( '. dropdown-menu input'). click (function () {return false;}) .change (function () {$ (this) .parent ( '. dropdown-menu'). 형제 ( '. Dropdown-Toggle'). dropdown ( 'toggle');}) .keydown ( 'esc', function ()); $ ( '[data-lole = magic-overlay]'). 각 (function () {var 오버레이 = $ (this), target = $ (오버레이.data ( 'target')); 오버레이.css ( '불투명도', 0) .css ( '위치', '절대'). 오프셋 (target.offset ()). }); if (document.createElement ( "input"))의 "onwebkitspeechchange") {var editorOffset = $ ( '#editor'). offset (); $ ( '#voybtn'). css ( '위치', '절대'). 오프셋 ({top : editorOffset.top, left : editorOffset.left+$ ( '#editor'). innerWidth () -35}); } else {$ ( '#voybtn'). hide (); }}; 함수 샤워 시러러리트 (이유, 세부 사항) {var msg = ''; if (이유 === '지원되지 않은 파일 유형') {msg = "지원되지 않은 형식" +세부 사항; } else {console.log ( "오류 업로드 파일", 이유, 세부 사항); } $ ( '<div> <button type = "button"data-dismiss = "alert"> × </button>'+'<strong> 파일 업로드 오류 </strong>'+msg+'</div>'). prependto ( '#alerts'); }; initToolbarbootstrapbindings (); $ ( '#editor'). wysiwyg ({fileUploadError : ShowerRoralert});마지막으로 HTML 코드 :
<div data-lole = "editor-toolbar"data-target = "#editor"> <div> <dato-toggle = "dropdown"> </i> <b> </b> </a> <ul> </ul> </div> <a data-toggle = "dropdown"> <i> </i> </b> <ul> <li> <a <a <a <a <a <a <a <a <li- <a <li- <a <li- <li- <li- <a <li- <li- <li- <li- <li- <a <li- <li- <liat. 5 "> <font size ="5 "> 거대한 </font> </a> </li> <li> <a data-edit ="fontsize 3 "> <font size ="3 "> normal </font> </a> <li> <a data-edit ="fontsize 3 "> <font size ="3 "> </font> </font> data-edit = "fontsize 1"> <font size = "1"> small </font> </a >> </li> </ul> </ul> </div> <a data-edit = "bold"> </i> </a> <a data-edit = "italic"> <i> </i> </a> <a data-edit = "strikethrough"> <i> </i> </a> <a data-edit = "밑줄"> <i> </i> </a> </div> <div> <a data-edit = "insertunorderedList"> </i> </a> <a data-edit = "outdent"> </i> </i> </i> data-edit = "outdent"> <i> </i> </a> <a data-edit = "outdent"> </i> </a> <a data-edit = "outdent"> </i> </a> <a data-edit = "indent"> <i> </i> </div> <a div> <a div> data-edit = "respitifyleft"> <i> </i> </a> <a data-edit = "respitifyCenter"> </i> </a> <a data-edit = "respitifyright"> </i> </a> <data-edit = "justifyfull"> </i> </a> </div> </div> <a div> <a div. data-toggle = "dropdown"> <i> </i> </a> <div> <div> <입력 자리 표시기 = "url"type = "text"data-edit = "createlink"/<button type = "button"> add </button> </div> <a data-edit = "untink"> <i> </i> </a div> <a div> <a id = "pictureBtn"> <i> </i> </a> <input type = "file"data-role = "magic-Overlay"data-target = "#picturebtn"data-edit = "insertImage"/> </div> <div> <a data-edit = "undo"> <i> </i> </a> <a data-edit = "<i> </i> <a <a data-edit ="<i> <i> <i> <i> <i> <i> <a data-edit = " </div> <input type = "text"data-edit = "insertText"id = "VoyBtn"x-webkit-speech = ""> </div> <div id = "편집기"> 컨텐츠 입력… </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.