HTML 온라인 편집기 호출 및 사용 방법
- 黄舟원래의
- 2016-12-15 13:24:352271검색
HTML 온라인 편집기는 Dreamweaver 사용법을 알 필요가 없습니다. Word 사용법을 알고 있다면 기사 시스템이나 뉴스 시스템에서 텍스트 편집이 필요한 웹 프로그램에서 매우 실용적입니다.
그런데 HTML 편집기를 웹페이지에 삽입하는 방법과 내부 데이터를 얻는 방법은 무엇입니까? !
우선 호출하려는 HTML 온라인 편집기가 별도의 페이지에 배치되어 있고 파일 이름이 gledit.htm이라고 가정합니다.
HTML 온라인 편집기에는 두 가지 기본 호출 방법이 있습니다.
1. 개체를 사용하여 호출:
1. 웹 페이지에 html 편집기를 삽입하는 방법: 필요한 위치에 다음 html 코드를 추가합니다. 포함됨: < object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT>
객체 태그의 데이터 뒤에는 우리가 편집기 페이지의 경로와 ID는 객체를 호출할 때 얻는 ID입니다. 이 ID는 나중에 편집기에서 데이터를 가져올 때 사용됩니다. 너비와 높이는 편집기의 높이와 너비입니다.
2. HTML 편집기에서 데이터를 가져오는 방법: 제출해야 하는 모든 콘텐츠를 양식에 넣습니다. 동시에 개체가 호출하는 편집기도 이 양식에 배치할 수 있습니다. 숨겨진 텍스트 영역( 또는 )은 HTML을 임시로 저장하는 데 사용됩니다. 온라인 에디터의 데이터는 asp, jsp, php 등에서 폼에 있는 객체의 내용을 직접 얻을 수 없기 때문에 숨겨진 텍스트 영역을 이용해서 데이터를 얻어야 합니다. 양식이 제출되면 개체의 내용을 숨겨진 텍스트 영역에 복사합니다. 자세한 코드는 다음과 같습니다.
이런 식으로 백그라운드 처리 페이지에서 html 온라인 편집기의 데이터를 가져와서 직접 얻을 수 있습니다. 숨겨진 영역 콘텐츠.
3. 텍스트 편집기에서 HTML 온라인 편집기에 로컬 이미지를 업로드하는 방법: 먼저 우리가 작성한 프로그램을 사용하여 버튼을 클릭하면 이미지 업로드 창이 나타납니다. 로컬 이미지를 서버에 업로드하려면 이미지의 경로를 기록한 다음 이미지를 표시하는 html 태그를 html 온라인 편집기의 값에 추가해야 합니다. 자세한 설명과 코드는 다음과 같습니다.
에디터에서 onclick="window.open('img_upload.asp','img_upload','width=481 height=190')"> 이벤트를 추가합니다. 버튼을 눌러 이미지를 삽입합니다. 'img_upload.asp'에서 제출된 이미지를 서버에 업로드하여 디렉토리를 만든 다음 이미지 경로를 기록합니다.
이렇게 하면 업로드한 이미지를 편집기에 간단히 삽입할 수 있습니다.
4. 기사를 편집하고 수정할 때 데이터를 수정하기 위해 HTML 온라인 편집기를 호출하는 방법: 데이터베이스에 데이터를 추가할 때 데이터를 수정하기 위해 HTML 온라인 편집기를 제출할 때 HTML 온라인 편집기도 사용할 수 있어야 합니다. 데이터베이스의 내용을 편집하여 데이터를 수정합니다. 먼저 데이터베이스에 콘텐츠를 배치하기 위해 양식에 숨겨진 영역을 추가합니다(예: , 여기서는 숨겨진 입력 대신 숨겨진 텍스트 영역을 사용합니다. 데이터에 캐리지 리턴 및 라인 피드가 포함될 수 있으므로 "> <%=(rs("Content")에 줄바꿈이 있어서 HTML 오류가 발생할 수 있습니다. %> (값=다음) 수신된 데이터는 한 줄에 있어야 합니다. 그렇지 않으면 오류가 발생합니다. 그런 다음 이전에 설명한 대로 개체를 사용하여 HTML 온라인 편집기를 호출합니다. 실제로는 제출할 때의 반대 과정입니다. 숨겨진 텍스트만 변경하면 됩니다. 해당 영역의 내용을 HTML 온라인 편집기에 복사하기만 하면 됩니다. 여기에 를 본문에 추가하여 페이지가 로드될 때 데이터베이스의 내용을 HTML 온라인 편집기에 넣어 편집할 수 있습니다. 제출 과정은 위에서 설명한 것과 동일하므로 저는 여기서는 자세히 다루지 않겠습니다.
2. iframe 호출을 사용합니다. (일부는 객체와 동일합니다.)
1. 웹페이지에 삽입하는 방법: 삽입해야 하는 HTML 코드는 다음과 같습니다. "src=" 이후에 받은 데이터가 우리가 호출하려는 것입니다. 온라인 편집기 페이지의 경로는 IFRAME 호출 시의 ID입니다. 너비와 높이는 높이입니다.
2. HTML 편집기에서 데이터를 얻는 방법: 제출해야 하는 모든 콘텐츠가 양식에 배치되어 있으며 숨겨진 텍스트 영역(<)을 설정할 수 있습니다. ;textarea name="content" style="display:none"> 또는 )는 HTML 온라인 편집기의 데이터를 임시로 저장하는 데 사용됩니다. 제출할 때 숨겨진 텍스트 영역을 사용하여 데이터를 얻습니다. 양식이 제출되면 개체의 내용을 숨겨진 텍스트 영역에 복사합니다. 자세한 코드는 다음과 같습니다.
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
백그라운드 처리 페이지에서는 숨겨진 영역 콘텐츠의 데이터를 가져와서 html 온라인 편집기의 데이터를 직접 얻을 수 있습니다.
2. HTML 편집기에서 데이터를 가져오는 방법: 제출해야 하는 모든 콘텐츠를 양식에 넣습니다. 동시에 개체가 호출하는 편집기도 이 양식에 배치할 수 있습니다. 숨겨진 텍스트 영역( 또는 )은 HTML을 임시로 저장하는 데 사용됩니다. 온라인 에디터의 데이터는 asp, jsp, php 등에서 폼에 있는 객체의 내용을 직접 얻을 수 없기 때문에 숨겨진 텍스트 영역을 이용해서 데이터를 얻어야 합니다. 양식이 제출되면 개체의 내용을 숨겨진 텍스트 영역에 복사합니다. 자세한 코드는 다음과 같습니다.
이런 식으로 백그라운드 처리 페이지에서 html 온라인 편집기의 데이터를 가져와서 직접 얻을 수 있습니다. 숨겨진 영역 콘텐츠.
3. 텍스트 편집기에서 HTML 온라인 편집기에 로컬 이미지를 업로드하는 방법: 먼저 이미지를 삽입하기 위해 버튼을 클릭하면 이미지 업로드 창이 팝업되도록 만듭니다. 그런 다음 이미지의 경로를 기록한 다음 html 온라인 편집기를 호출하는 웹 페이지에 함수를 작성하여 커서 위치에 이미지를 표시하는 html 태그를 삽입해야 합니다. 자세한 설명과 코드는 다음과 같습니다.
에디터에서 onclick="window.open('img_upload.asp','img_upload','width=481 height=190')"> 이벤트를 추가합니다. 이미지를 삽입하는 버튼 ;편집기를 호출하는 페이지에서 편집기에 HTML 코드를 삽입하는 함수를 정의합니다
업로드된 이미지를 처리하는 파일에서는 상위 창의 함수를 호출하여 html 코드를 삽입합니다
이를 통해 업로드된 이미지를 편집기에 간단히 삽입할 수 있습니다.
4. 기사 편집 및 수정 시 HTML 온라인 편집기를 호출하여 데이터를 수정하는 방법: 추가 시 HTML 온라인 편집기를 사용하여 데이터를 수정할 때 HTML 온라인 편집기도 사용할 수 있어야 합니다. 데이터를 수정하려면 온라인 편집기에 데이터를 제출한 후 수정하세요. 먼저 데이터베이스에 콘텐츠를 배치하기 위해 양식에 숨겨진 영역을 추가합니다(예: , 여기서는 편집기를 호출하는 iframe에