BootStrap 기반 텍스트 편집기 구성 요소 Summernote

9013 단어 bootstrap텍스트 편집기Summernote
Summernote 는 jquery 기반 boottstrap 슈퍼 간단 WYSIWYG 온라인 편집기 입 니 다.Summernote 는 매우 경량급 으로 크기 가 30KB 에 불과 하 며 Safari,Chrome,Firefox,Opera,Internet Explorer 9+(IE8 지원 이 곧 다가 온다)를 지원 합 니 다.
특징:
세계 최고의 WYSIWYG 온라인 편집기
설치 하기 쉽다
개원 하 다
사용자 정의 초기 화 옵션
단축 키 지원
각종 백 엔 드 프로그램 언어 에 적용
Summernote 홈 페이지 주소:https://summernote.org/
이것 은 홈 페이지 의 한 예 이다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Summernote</title>
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
 <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="external nofollow" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
 <div id="summernote"><p>Hello Summernote</p></div>
 <script>
 $(document).ready(function() {
 $('#summernote').summernote();
 });
 </script>
</body>
</html>
효과 그림:

가장 간단 한 기본 구성 요소 초기 화 방법:
에 용기 추가
:

<div id="summernote">Hello Summernote</div>
Jquery 로 이 구성 요 소 를 초기 화 합 니 다:

$(document).ready(function() {
 $('#summernote').summernote();
});
편집 상자 의 높이 와 같은 구성 요 소 를 사용자 정의 할 수 있 습 니 다.

$('#summernote').summernote({
 height: 300,   //        
 minHeight: null,  //           
 maxHeight: null,  //           
 });
도구 막대 도 사용자 정의 할 수 있 습 니 다.

 <!--   -->
  toolbar: [
  <!--    -->
  ['fontname', ['fontname']], //         
  ['style', ['bold', 'italic', 'underline', 'clear']], //     、    、     、       
  ['font', ['strikethrough', 'superscript', 'subscript']], //    、    、     
  ['fontsize', ['fontsize']], //        
  ['color', ['color']], //    
  <!--    -->  
  ['style', ['style']],//  
  ['para', ['ul', 'ol', 'paragraph']], //    、    、      
  ['height', ['height']], //  
  <!--    --> 
  ['table',['table']], //     
  ['hr',['hr']],//       
  ['link',['link']], //      
  ['picture',['picture']], //      
  ['video',['video']], //    
  <!--  -->
  ['fullscreen',['fullscreen']], //  
  ['codeview',['codeview']], //  html  
  ['undo',['undo']], //  
  ['redo',['redo']], //    
  ['help',['help']], //  
  ],
다른 초기 화 설정:
              lang:'zh-CN',  //중국어 설정,중국어 플러그 인 summernote-zh-cn.js 도입
              place holder:'write here...',//자리 표시 자
              dialogsInBody: true,  //대화 상 자 를 편집 상자 에 둘 까요,바디 에 둘 까요?
              dialogsFade:true,/대화 상자 표시 효과
              disableDragAndDrop:true,/드래그 앤 드 롭 기능 사용 안 함
              shortcuts:false,//단축 키 사용 하지 않 기
그리고 반전 함수:

callbacks: {
 
 }
리 셋 함수 에 있 는 이 벤트 는 oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste,onImageUpload 등 이 있 습 니 다.
사진 업로드 가 촉발 하 는 이벤트 onImageUpload 를 소개 합 니 다.
그림 을 삽입 할 때 Summernote 구성 요 소 는 기본적으로 그림 을 바 이 너 리 로 보 여 줍 니 다.이 방식 으로 텍스트 상자 의 내용 을 데이터베이스 에 저장 하면 데이터베이스 데이터 양 이 많 습 니 다.
이것 은 summernote 기본 방식 으로 그림 을 삽입 할 때 데이터베이스 에 저 장 된 필드 입 니 다.

그래서 여기 서 다른 방법 을 사용 하 는 것 은 바로 그림 을 서버 에 올 리 고 업로드 에 성공 한 후에 그림 을 전송 하 는 방문 주 소 를 삽입 한 그림 위치 에 올 려 그림 을 보 여 주 는 것 이다.
구체 적 인 실현 은 다음 과 같다.                                

callbacks: { 
     onImageUpload: function(file) { //                 ，                   ，           
      //     Formdate         
      var formData = new FormData(); 
      //‘picture'         ，file[0]       
      formData.append("picture", file[0]); 
      $.ajax({    
       type:'post', 
       url:'      ',   
       cache: false,
       data:formData, 
       processData: false,
       contentType: false,
       dataType:'text', //     ，             ，   text    ，   json  
       success: function(picture) {      
       $('#summernote').summernote('insertImage',picture); 
       }, 
       error:function(){       
       alert("    ");       
       } 
      });
     } 
     }
배경 처리 요청 은 서버 에 그림 을 저장 하고 성공 하면 그림 접근 주 소 를 되 돌려 줍 니 다.
 메모:그림 에 올 린 실제 주소 와 가상 그림 접근 주 소 를 tomcat 의 server.xml 에 맵 관 계 를 설정 하 였 기 때문에 업로드 에 성공 한 후 전단 에 돌아 온 것 은 가상 접근 주소 입 니 다.

@RequestMapping(value="contentFileUpload",method=RequestMethod.POST)
 @ResponseBody
 public String contentFileUpload(MultipartFile picture) {
 if (picture!=null && picture.getOriginalFilename()!=null && picture.getOriginalFilename().trim().length()>0) { 
  /**
  * picture    （+     ）
  */
  //        
  String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';
  //          
  String fictitiousRoot = '/file'
  //           
  SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/"); 
  String datePath = sdf.format(new Date());
  //      
  String realuUploadBrandPath = realUploadPath+"/content"+datePath;
  //        
  String fictitiousUploadBrandPath =fictitiousRoot +"/content"+datePath;
  //          
  String originFileName = picture.getOriginalFilename(); 
  //        
  String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf(".")); 
  //              
  File dir=new File(realuUploadBrandPath); 
  if(!dir.exists()){ 
  dir.mkdirs(); 
  } 
  //     
  File newFile = new File(realuUploadBrandPath+File.separator+newFileName); 
  //             
  try {
  picture.transferTo(newFile);
  } catch (IllegalStateException | IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
  } 
  //        
  String fictitiousFilePath = fictitiousUploadBrandPath+newFileName; 
  return fictitiousFilePath;   
 }
 return "false"; 
 }
권장:실제 업로드 루트 경 로 는 properties 설정 파일 에 써 야 합 니 다.향후 주소 의 수정 을 편리 하 게 해 야 합 니 다.또한 가상 접근 루트 경 로 는 데이터베이스 에 저장 하지 말고 상대 적 인 위치 만 저장 하면 됩 니 다.가상 접근 루트 경 로 를 properties 파일 에 도 쓰 십시오.
 위의 방법 으로 처리 한 후 데이터베이스 에 저 장 된 필드:

 편집 상자 의 내용 을 가 져 오 는 방법:

var markupStr = $('#summernote').summernote('code');
총결산
위 에서 말씀 드 린 것 은 부 트 스 트랩 기반 텍스트 편집기 구성 요소 Summernote 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
jQuery 는 드 롭 다운 상자 의 값 을 누 르 면 텍스트 상자 에 누적 되 는 방법 을 보 여 줍 니 다.
위 챗 애플 릿 템 플 릿 인 스 턴 스 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage