이 편집자의 관련 기능에 대한 공식 설명을 살펴 보겠습니다.
1. Mac 및 WNDows 플랫폼의 일반적인 작업을 위해 표준 핫키를 자동으로 바인딩 할 수 있습니다.
2. 드래그하고 떨어 뜨려 사진을 삽입 할 수 있습니다. 이미지 업로드 지원 (모바일 장치에서 사진을 얻을 수도 있음)
3. 음성 인식 입력 (크롬 브라우저 만)
4. 사용자 정의 도구 모음을 허용합니다. 추가 태그가 생성되지 않습니다. Bootstrap, Font Awesome 등과 같은 도구 라이브러리의 우수한 기능을 최대한 활용할 수 있도록 웹 사이트를 지원하십시오.
5. 필수 스타일이 없다면 모든 것이 당신에게 달려 있습니다.
6. 비표준 코드가없는 브라우저의 표준 기능에 의존합니다. 도구 모음 및 키보드 기능을 사용자 정의 할 수 있으며 브라우저에서 지원하는 모든 명령을 실행할 수 있습니다.
7.이 편집기는 별도의 프레임, 백업 텍스트 영역 등을 생성하지 않으며 가능한 한 간단하게 유지하고 DIV에서 실행하십시오.
8. (선택 사항) 꼬리 공간을 비우십시오. 빈 디브와 스팬을 지우십시오
9. 현대식 브라우저에서 실행해야합니다 (Chrome 26, Firefox 19, Safari 6에서 테스트 및 사용자는 IE10에서 작업 할 수 있다고보고합니다).
10. 모바일 브라우저 지원 (iOS 6 iPad/iPhone 및 Android 4.1.1 크롬에서 테스트)
참고 : Wysiwyg 및 Wysihtml5는 두 개의 다른 편집자입니다. Wysiwyg는 Wysihtml5의 향상된 버전으로 비교적 유사합니다. 따라서 필요에 따라 사용할 수 있습니다.
wysiwyg 공식 웹 사이트 : http://mindmup.github.io/bootstrap-wysiwyg/
Wysiwyg Chinese 웹 사이트 : http://www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5 공식 웹 사이트 : http://jhollingworth.github.io/bootstrap-wysihtml5/
Wysiwyg는 Wysihtml5의 향상된 버전이므로 Wysiwyg의 사용에 대해 이야기하겠습니다. Wysihtml5는 비슷합니다.
사용할 단계
1. 다음 JS 및 CSS 파일을 소개하십시오. 여기서는 공식 웹 사이트가 일반적인 용도 일 뿐이며 다음 문서가 발효되기 전에 다음 문서를 소개해야 하므로이 웹 사이트는 실제 응용 프로그램에 중점을두고 있으며 이러한 세부 사항을 무시할 수 없습니다.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css"rel = "Stylesheet"> <link href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css"rel = "Stylesheet"> <스크립트 src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script src = "htttps://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"> </script> src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/bootstrap/assets/js/js/js/gogle-prode/pretty/pretty/ href = "index.css"rel = "스타일 시트"> <script src = "bootstrap-wysiwyg.js"> </script>
2. JS 코드를 추가하십시오. 너무 많은 코드로 인해 여기에는 나열되지 않습니다. 이 웹 사이트는 소스 코드를 정렬했습니다. Demo.html의 소스 코드를 참조하십시오
.........
3. 다음 형식 HTML 코드를 본체 태그에 추가하십시오. 여기에서 편집기가 캡슐화되지 않았지만 코드를 HTML 페이지에 직접 씁니다. 전체 편집기는 상단 도구 모음과 텍스트 편집 상자의 두 부분으로 나눌 수 있습니다.
1) 최상위 도구 모음 : 다수의 div.btn 그룹을 포함하는 div.btn-toolbar입니다. 각 도구 버튼은 div.btn 그룹입니다. 각 div.btn-group에서 우리는 중국어를 표시하도록 프롬프트 텍스트를 직접 구성 할 수 있습니다.
<div data-lole = "editor-toolbar"data-target = "#editor"> <div> </div> .......... <div> </div> </div>
여기에는 HTML5 음성 입력 도구도 있습니다. 코드는 다음과 같습니다.
<input type = "text"data-edit = "insertText"id = "VoiceBtn"x-webkit-speech = "">
2) 콘텐츠 텍스트 상자 : Div#편집기
<div id = "편집자"> 컨텐츠 </div>
위는 부트 스트랩-와이 시그에 대한 간단한 소개입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
실제로 WYSIWG는 시각적 편집기를 구축하기 위해 일부 DIV 만 정의하면되며, 편집 부품은 ID 편집기와 함께 DIV 만 있으면됩니다. Bootstrap-Wysiwyg Visual Editor에 대한이 간단한 소개가 실제로 모든 사람에게 도움이되기를 바랍니다.