jquery 사용자 정의 가능한 온라인 UEditor editor

jquery 사용자 정의 가능한 온라인 UEditor editor_jquery

WBOY

풀어 주다： 2016-05-16 15:31:49

원래의

1510명이 탐색했습니다.

바이두 웹 프런트엔드 R&D 부서에서 개발한 WYSIWYG 서식 있는 텍스트 웹 편집기 UEditor의 미니 버전인 UMeditor는 가볍고 사용자 정의가 가능하며 사용자 경험에 중점을 두고 코드를 자유롭게 사용하고 수정할 수 있어 프런트에 적합합니다. -빠르고 간단한 답장 상자 또는 백엔드 콘텐츠 편집기를 종료합니다.

사용법:

이 플러그인은 Baidu의 "FEX 프런트엔드 R&D 팀"에서 개발되었기 때문에 강력하고 상세한 중국어 공식 문서가 있습니다. 이 글의 목적은 친구들에게 이렇게 좋은 플러그인이 있다는 것을 알리는 것입니다. 에 있으므로 문서 매뉴얼, 다운로드, 예제는 모두 공식 링크입니다.
필요한 언어 버전을 다운로드한 후 압축을 풀고 압축을 푼 디렉터리에 데모라는 html 파일을 생성합니다. 코드는 다음과 같습니다

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
 
<body>
 <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">
 这里写你的初始化内容
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
 var ue = UE.getEditor('container');
 </script>
</body> 
</html>

로그인 후 복사

자, 위의 작업을 완료한 후 브라우저에서 데모.html을 열면 다음 화면이 표시됩니다. 축하합니다. 첫 번째 배포에 성공했습니다!

사용방법은? 또 다른 자세한 사용법:
demo.html 파일을 생성합니다. 먼저 편집기를 추가해야 하는 곳에 다음 코드를 추가합니다. 스타일을 사용하여 편집기의 너비와 높이를 설정합니다.

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script>

로그인 후 복사

그런 다음 UMEditor 관련 js 및 css 파일을 로드합니다. 관련 파일은 이 사이트에서 다운로드하거나 UMEditor 공식 웹사이트로 직접 이동하여 최신 버전을 다운로드할 수 있습니다.

<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> 
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> 
<link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">

로그인 후 복사

다음으로 편집자에게 전화를 겁니다.

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script>

로그인 후 복사

이제 브라우저를 열어 편집기 효과를 미리 볼 수 있습니다.
맞춤 설정 옵션
UMeditor는 사용자가 자신의 프로젝트 요구 사항에 따라 사용자 정의할 수 있는 다양한 옵션 설정을 제공합니다.
다음 코드를 사용하여 편집기에서 콘텐츠를 가져올 수도 있습니다. 일반 텍스트 콘텐츠를 가져올 수도 있습니다.

UM.getEditor('myEditor').getContent();

로그인 후 복사

편집기에 콘텐츠가 있는지 확인하려면 다음 코드를 사용할 수 있습니다.

 var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
 alert('有内容。'); 
 }else{ 
 alert('无内容。'); 
 }

로그인 후 복사

에디터를 폼에 넣고 액션 경로를 설정하면 폼을 제출해 에디터에 있는 콘텐츠를 보낼 수 있습니다. 예:

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form>

로그인 후 복사

툴바에 허용되는 도구 아이콘을 설정할 수 있습니다. 예를 들어 다음은 일반적으로 사용되는 여러 도구 아이콘을 간단하게 사용자 정의하는 것입니다.

var editor = UM.getEditor('container',{ 
 toolbar: 
 ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
 
});

로그인 후 복사

UMeditor는 표 편집, 목록 레이아웃, 멀티미디어 삽입, 이미지 업로드, 지도 호출 등 필요에 따라 사용자 정의할 수 있는 다양한 도구를 제공합니다. UMeditor는 주로 업로드된 이미지를 처리하는 데 사용되는 서버의 여러 언어 버전을 제공합니다. 사용자는 업로드 경로, 업로드 파일 형식 제한, 크기 제한 등을 설정할 수 있습니다. 설정하고 적용하면 됩니다.

사용 효과:

위 내용은 이 기사의 전체 내용입니다. 모든 사람이 UMEditor 편집기를 더 잘 사용하는 데 도움이 되기를 바랍니다.