HTML 편집기 FCKeditor 사용에 대한 자세한 설명

1. 소개
기능: 보이는 그대로, 사진과 플래시를 지원하고, 도구 모음을 자유롭게 구성할 수 있으며 사용하기 쉽습니다.
호환성: IE 5.5+, Firefox 1.5+, Safari 3.0+, Opera 9.50+, Netscape 7.1+, Camino 1.0+
성숙도: 널리 사용되며 Baidu, CSDN 등에서 선택
2. 다운로드
공식 다운로드 홈페이지: http://www.fckeditor .net/download/, 현재 버전은 2.5.1
FCKeditor 2.5.1(FCKeditor_2.5.1.zip) 및 FCKeditor.Java(FCKeditor-2.3.zip)를 다운로드해야 합니다
배포
이 예에서는 WebRoot가 애플리케이션 루트 경로로 사용됩니다. 배포 후 디렉터리 구조는 다음과 같습니다.

1. FCKeditor_2.5.1.zip의 압축을 풀고 fckeditor 폴더를 /WebRoot/
에 복사합니다. 2. FCKeditor-2.3.zip 및 commons 압축 풀기 - fileupload.jar 및 FCKeditor-2.3.jar을 /WebRoot/WEB-INF/lib/
에 복사합니다. 3 /WebRoot/WEB-INF/web.xml 파일을 수정하고 다음 내용을 추가하세요:

Connector
com.fredck.FCKeditor.connector.ConnectorServlet

baseDir
/UserFiles/


debug
true/param-value>

1


SimpleUploader
com.fredck.FCKeditor.uploader.SimpleUploaderServlet-class>

baseDir
/UserFiles/
param>

debug
truevalue>


enabled
true


AllowedExtensionsFile

init-param>

DeniedExtensionsFile
php|php3|php5|phtml|asp|aspx|ascx|jsp |cfm|cfc|pl|bat|exe|dll |reg|cgi


AllowedExtensionsImage param-name>
jpg|gif|jpeg|png|bmp


DeniedExtensionsImage



AllowedExtensionsFlash
swf|fla


DeniedExtensionsFlash/ param-name>


1


Connector
/fckeditor/connector
-mapping>

SimpleUploader
/fckeditor/simpleuploader
-mapping>
4. /WebRoot/fckeditor/fckconfig.js를 수정합니다.
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html? Connector=/fckeditor/connector' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html?Type=Image&Connector=/fckeditor/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser .html?Type=Flash&Connector=/fckeditor/connector' ;
FCKConfig.LinkUploadURL = '/fckeditor/simpleuploader?Type=File' ;
FCKConfig .ImageUploadURL = '/fckeditor/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = '/fckeditor/simpleuploader?Type=Flash';
참고:
(1) 3단계와 4단계에서 구성을 설정합니다. 파일 탐색 및 업로드의 경우 은 fckconfig.js의 URL 참조와 일치해야 합니다.
(2) 이 예제의 정상적인 작동을 위한 전제 조건은 WebRoot입니다. 가상 경로가 설정된 경우 서블릿을 찾을 수 없습니다.
4.
사용 이 예제는 가장 직접적인 js 메서드를 사용합니다. API 및 TagLib 메서드의 경우 FCKeditor-2.3.zip의 압축을 푼 후 _samples 아래의 예제를 참조하세요.
fckdemo.jsp:

String content=request.getParameter("content");
if (content != null) {
content = content.replaceAll(" rn", "");
content = content.replaceAll("r", "");
content = content.replaceAll("n", "");
content = content.replaceAll(""", "'");
}else{
content = "";
}
%>

값(다음에 직접 저장할 수 있음) 데이터베이스):

form>


렌더링:

5. 구성 파일 fckconfig.js
1. 기본 언어는 다음과 같습니다. " zh-cn"으로 변경
2. 사용자 정의 도구 모음: ToolbarSet를 수정하거나 추가할 수 있습니다. 예:
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic', '-' ,'OrderedList','UnorderedList','-','링크','링크 해제
','-','TextColor','BGColor','-','Style','-' ,'Image ','Flash','Table']
] ;
3. EnterMode 및 ShiftEnterMode: "Enter" 및 "Shift+Enter"의 줄 바꿈 동작, 주석은 선택적 모드를 프롬프트합니다
4. EditorAreaCss : 영역 스타일 파일 편집
5. 기타 매개변수:
AutoDetectLanguage=true/false 언어 자동 감지
BaseHref="" 상대 링크의 기본 주소
ContentLangDirection="ltr/rtl " 기본 텍스트 방향
ContextMenu=String 배열, 오른쪽 클릭 메뉴의 내용
CustomConfigurationsPath="" 사용자 정의 구성 파일 경로 및 이름
Debug=true/false 디버깅 활성화 여부, FCKDebug 시 .Output()이 호출되면 디버깅 창에 콘텐츠가 출력됩니다.
EnableSourceXHTML=true/false TRUE인 경우 시각적 인터페이스에서 코드 페이지로 전환하면 HTML이 XHTML로 처리됩니다.
EnableXHTML=true/ false HTML 대신 XHTML 사용 허용 여부
FillEmptyBlocks=true/false 이 함수를 사용하여 빈 블록 수준 요소를 공백으로 대체합니다.
FontColors="" 색상 선택기를 표시할 때 텍스트 색상 목록을 설정합니다.
FontFormats="" 표시할 텍스트 형식 목록 설정
FontNames="" 글꼴 목록의 글꼴 이름
FontSizes="" 글꼴 크기의 글꼴 크기 목록
ForcePasteAsPlainText=true/false 강제 붙여넣기 일반 텍스트로
ForceSimpleAmpersand=true/false & 기호를 XML 엔터티로 변환하지 않을지 여부
FormatIndentator="" 소스 코드 형식에서 코드를 들여쓸 때 사용되는 문자
FormatOutput=true/false 자동으로 코드 서식을 지정할지 여부 콘텐츠 출력 시
FormatSource=true /false 코드 보기로 전환 시 자동으로 코드 서식을 지정할지 여부
FullPage=true/false HTML 파일 전체 편집을 허용할지 아니면 BODY 사이의 콘텐츠만 편집 허용할지 여부
GeckoUseSPAN= true/false SPAN 태그가 B ,I,U 태그를 대체하도록 허용할지 여부
IeSpellDownloadUrl=""맞춤법 검사기를 다운로드할 URL
ImageBrowser=true/false 서버 기능 탐색 허용 여부
ImageBrowserURL= "" 서버 탐색 시 실행되는 URL
ImageBrowserWindowHeight=" " 이미지 브라우저 창 높이
ImageBrowserWindowWidth="" 이미지 브라우저 창 너비
LinkBrowser=true/false 링크 삽입 시 서버 탐색 허용 여부
LinkBrowserURL="" 링크 삽입 시 서버의 URL 검색
LinkBrowserWindowHeight=""링크 대상 브라우저 창 높이
LinkBrowserWindowWidth=""링크 대상 브라우저 창 너비
Plugins=object 플러그인 등록
PluginsPath="" 플러그인 폴더
ShowBorders=true/false 테두리 병합
SkinPath="" 스킨 폴더 위치
SmileyColumns=12 아이콘 창 열 수
SmileyImages=문자 배열 배열 아이콘 창의 이미지 파일 이름
SmileyPath="" 아이콘 파일 클립 경로
SmileyWindowHeight 아이콘 창 높이
SmileyWindowWidth 아이콘 창 너비
SpellChecker="ieSpell/Spellerpages" 맞춤법 검사기 설정
StartupFocus= true/false 활성화 시 편집기에 초점
StylesXmlPath="" CSS 스타일 목록을 정의하는 XML 파일의 위치 설정
TabSpaces=4 TAB 키에 의해 생성되는 공백 문자 수
ToolBarCanCollapse=true/false 도구 모음 확장/축소 허용 여부
ToolbarSets=object TOOLBAR 컬렉션 사용 허용
ToolbarStartExpanded=true/false TOOLBAR 확장 여부 켜기
UseBROnCarriageReturn=true/false 입력 시 BR 표시 또는 P 또는 DIV 표시 생성 여부
🎜> 6. 사용자 정의 스타일
도구 모음 스타일 옵션은 fckconfig.js에 의해 지정된 구성 파일에 의해 생성됩니다:
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;

위 HTML 편집기 FCKeditor 사용에 대한 자세한 설명입니다. 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!