사용하기 쉬운 HTML 편집기(UEditor) 튜토리얼
- 零下一度원래의
- 2017-05-04 14:45:235375검색
HTML 편집기에 관해서는 CKeditor의 업그레이드 버전인 FCKeditor와 TinyMCE를 사용해 보았는데요, 최근에는 Baidu의 UEditor를 사용해 보려고 합니다. 이에 비해 저는 여전히 UEditor의 구성이 비교적 간단하고, 시작하기 쉽고, 문서와 예제가 완벽하다고 생각합니다. UEditor1.2.3.0PHP 버전의 UTF-8 버전을 예로 들어 UEditor의 사용 과정을 요약해 보겠습니다.
1. 먼저 UEditor의 문서 구조입니다
_examples: 다양한 버전의 편집기에 대한 예제 페이지
_src: JS 파일
대화 상자: 팝업 리소스 및 JS 파일에 해당하는 대화 상자
lang: 언어 팩 파일
PHP: 파일 업로드 처리, 원격 이미지 캡처, 이미지 온라인 관리, screen 스크린샷 관련 파일
테마: 스타일 이미지 및 스타일 파일
서드파티: 타사 플러그인
editor_all.js: _src 디렉토리에 있는 모든 파일의 패키지 파일
editor_all_min.js: editor_all.js 파일의 압축 버전. 정식 배포 중에만 사용
editor_config.js: 편집기 구성 파일
2. 시스템 구성
UEditor의 구성은 시스템 기본 구성과 사용자 정의 구성의 두 가지 유형으로 나눌 수 있습니다. 시스템 기본 구성은 각 해당 코어 또는 플러그인 파일에 분산되어 있으며 사용자에게 표시되지 않습니다. 사용자가 사용자 정의 구성에 주석을 달 때 작동합니다. 사용자 정의 구성에는 두 가지 유형이 포함됩니다. 하나는 editor_config.js 파일에 있으며 시스템 기본 구성보다 우선순위가 높습니다. 다른 하나는 편집기를 인스턴스화할 때 전달된 매개변수에 있습니다. 높은 우선순위 가장 높습니다. 기본적으로 UEditor는 editor_congfig.js에서 생략할 수 있는 모든 구성 항목을 주석 처리하고 시스템 기본 구성을 채택합니다. 주석이 제거된 경우 구성 항목이 우선적으로 적용되므로 사용자는 실제 프로젝트를 따라야 합니다. 조건을 채워주세요.
다음은 사용자가 정의한 간단한 구성입니다.
<script type="text/javascript">
// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置
var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下四个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo']]
//更多其他参数，请参考editor_config.js中的配置项
};가장 중요한 구성은 The에 대한 28행입니다. 이미지 업로드, 처리 및 기타 경로와 관련된 URL 매개변수 구성은 웹사이트에서 uediotr의 상대 경로 또는 절대 경로로 구성되어야 합니다. 예를 들어 내 프로젝트 이름이 t이고 루트 디렉터리가 www라면 URL 값은 다음과 같이 설정됩니다.
URL = window.UEDITOR_HOME_URL||"/t/UEditor/";
3.引入配置文件，JS文件和主题CSS文件
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="UEditor/editor_config.js"></script> <script type="text/javascript" src="UEditor/editor_all.js"></script> <link rel="stylesheet" href="UEditor/themes/default/ueditor.css">
4.创建编辑器实例及其DOM容器
<form action="" method="post" name="myForm"> <!--以下引入UEditor编辑器界面--> <script type="text/plain" id="editor" name="myContent"></script> //此处不设置name，则editor默认名字为"editorValue"，可以在 //editor_config.js中配置参数textarea，或者在此处设置 <input type="submit" name="submit" value="upload"/> </form>
5.设置选项并且渲染编辑器
如果需要有不同设置的ueditor，可以分别定义之后设置不同的自定义选项再渲染编辑器，
<script type="text/plain" id="myEditor" style="width:800px">
</script>
<script type="text/plain" id="myEditor1" style="width:800px">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>6.前后台数据交互
对于PHP可以直接用$_POST['ueditorName']获取编辑器的值，其中ueditorName的值为初始化编辑器时ueditor的name值。
以下为完整的渲染2个ueditor的代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<!--以下为引入UEditor资源部分-->
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">
<!--以上为引入UEditor资源部分-->
</head>
<body>
<form action="test.php" method="post" name="myForm">
<!--以下引入UEditor编辑器界面-->
<script type="text/plain" id="myEditor" name="myContent">这是一个测试还是一个测试</script>
<input type="submit" name="submit" value="upload"/>
</form>
<script type="text/plain" id="myEditor1"><p>这里我可以写一些输入提示</p></script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>
</body>
</html【相关推荐】
1. 免费html在线视频教程
2. html开发手册
위 내용은 사용하기 쉬운 HTML 편집기(UEditor) 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!