집 >웹 프론트엔드 >JS 튜토리얼 >BootStrap의 텍스트 편집기 구성 요소 Summernote 사용에 대한 자세한 설명

BootStrap의 텍스트 편집기 구성 요소 Summernote 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-16 11:18:018872검색

이번에는 BootStrap의 텍스트 편집기 컴포넌트 Summernote 사용에 대한 자세한 설명을 가져왔습니다. BootStrap 텍스트 편집기 컴포넌트 Summernote를 사용할 때 자세히 설명하는 주의사항은 무엇인가요? 봐.

Summernote는 jquery를 기반으로 하는 매우 간단한 부트스트랩 WYSIWYG 온라인 편집기입니다. Summernote는 크기가 30KB에 불과할 정도로 매우 가볍고 Safari, Chrome, Firefox, Opera 및 인터넷을 지원합니다. Explorer 9+(IE8 지원 예정)

특징:

세계 최고의 WYSIWYG 온라인 편집기

설치가 매우 쉽습니다

오픈 소스

사용자 정의 초기화 옵션

단축키 지원

다양한 백엔드 프로그램 언어에 적합

Summernote 공식 홈페이지 주소 : https://summernote.org/

다음은 공식 웹사이트의 예입니다:

nbsp;html>


 <meta>
 <title>Summernote</title>
 <link>
 <script></script> 
 <script></script> 
 <link>
 <script></script>


 <p></p><p>Hello Summernote</p>
 <script>
 $(document).ready(function() {
 $(&#39;#summernote&#39;).summernote();
 });
 </script>

렌더링:

BootStrap의 텍스트 편집기 구성 요소 Summernote 사용에 대한 자세한 설명

기본적으로 구성 요소를 초기화하는 가장 간단한 방법:

에 컨테이너

추가:

<p>Hello Summernote</p>

그런 다음 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

을 도입해야 합니다. Placeholder: 'Write Here ...', // Dialogsinbody: TRUE, // 대화 상자 Put 대화 상자에서는 편집 상자에 여전히 Body가 있습니다
DialogsFade: true , //대화 상자 표시 효과
비활성화DragAndDrop: true , // 드래그 앤 드롭 기능 비활성화
단축키: false , //
콜백 함수
도 있습니다:

callbacks: {
 
 }

콜백 함수의 이벤트에는 oninit, onenter, onfocus, onblur, onkeyup, onkeydown, onpaste, onImageUpload 등이 포함됩니다. 여기서는 주로 이미지 업로드로 인해 발생하는 onImageUpload 이벤트를 소개합니다.

그림을 삽입하면 Summernote 구성 요소는 기본적으로 그림을 바이너리 형식으로 표시합니다. 이런 방식으로 텍스트 상자의 내용을 데이터베이스에 저장하면 많은 양의 데이터베이스 데이터가 생성됩니다

이것은 summernote가 기본적으로 사진을 삽입할 때 데이터베이스에 저장되는 필드입니다.

따라서 여기서는 이미지를 서버에 업로드하는 또 다른 방법이 사용됩니다. 업로드가 성공한 후 이미지의 액세스 주소가 삽입된 이미지 위치로 반환되고 이미지가 표시됩니다. 구체적인 구현은 다음과 같습니다. 백그라운드 처리 요청은 이미지를 서버에 저장합니다. 성공하면 이미지 액세스 주소가 반환됩니다:

참고: 이미지 업로드를 위한 실제 주소와 Tomcat의 server.xml에 가상 이미지 액세스 주소 간의 매핑 관계를 구성했기 때문에 업로드가 성공한 후 가상 액세스 주소가 프런트 엔드에 반환됩니다. 권장 사항: 실제 업로드 루트 경로는 향후 주소 수정을 용이하게 하기 위해 속성

구성 파일

에 작성되어야 합니다. 동시에 가상 액세스 루트 경로는 데이터베이스에 저장되어서는 안 됩니다. 루트 경로에 액세스합니다. 경로는 속성 파일에도 기록됩니다.

편집 상자의 내용을 얻는 방법:

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("上传失败");       
       } 
      });
     } 
     }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!