ホームページ > ウェブフロントエンド > H5 チュートリアル > HTMLオンラインエディターの呼び出し方法と使用方法

HTMLオンラインエディターの呼び出し方法と使用方法

黄舟
リリース: 2016-12-15 13:24:35
オリジナル
2263 人が閲覧しました

HTML オンラインエディターは、Dreamweaver の使用方法を知る必要はありません。Word の使用方法を知っていれば、このエディターは、Web プログラムでテキスト編集を必要とする記事システムやニュースシステムで非常に実用的です。
しかし、HTML エディターを Web ページに埋め込む方法と、内部のデータを取得する方法は? !
まず、呼び出したい HTML オンライン エディターが別のページに配置されており、ファイル名が gledit.htm であると仮定します。
HTML オンライン エディターには 2 つの基本的な呼び出し方法があります
1. オブジェクトを使用して呼び出します:
1. Web ページに HTML エディターを埋め込む方法: 埋め込む必要がある場所に次の HTML コードを追加します: <オブジェクト ID =doc_html data= "gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT>
object タグ内のデータに続くデータは、必要なオンライン エディター ページへのパスです。 ID を取得するために object を呼び出します。この ID は、後でエディターでデータをフェッチするときに使用されます。幅と高さはエディターの高さと幅です。
2. HTML エディターでデータを取得する方法: 送信する必要があるすべてのコンテンツをフォームに配置します。同時に、隠しテキストも設定できます。エリア ( または ) は、HTML のオンライン編集時に一時的に保存するために使用されます。フォーム内のオブジェクトの内容は、asp、jsp、php では直接取得できないため、隠しテキスト領域を使用してデータを取得する必要があります。フォームが送信されると、オブジェクトの内容が隠しテキスト領域にコピーされます。詳細なコードは次のとおりです。

<フォームメソッド="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">



このようにして、バックグラウンド処理されたページで、隠し領域のコンテンツのデータを取得することで、HTMLオンラインエディターのデータを直接取得できます。

3. テキストエディターの HTML オンラインエディターにネイティブ画像をアップロードする方法: まず、画像を挿入するボタンをクリックすると、画像をアップロードするウィンドウが表示されます。ネイティブ画像をアップロードするために作成したプログラムを使用します。画像がサーバーに送信されたら、画像のパスを記録し、画像を表示する html タグを html オンライン エディターの値に追加する必要があります。詳細な説明とコードは次のとおりです。
エディターで、挿入するボタンにイベント onclick="window.open('img_upload.asp','img_upload','width=481 height=190')" を追加します。画像> 「img_upload.asp」では、送信された画像をサーバーにアップロードしてディレクトリを作成し、画像のパスを記録します

これにより、アップロードした画像をエディタに挿入するだけです。
4. 記事の編集および変更時に HTML オンライン エディターを呼び出してデータを変更する方法: データベースに追加するときにデータを変更するために HTML オンライン エディターを送信するときは、HTML オンライン エディターも使用できる必要があります。データベースの内容を編集してデータを変更します。まず、データベースにコンテンツを配置するための非表示領域をフォームに追加します。例: では、ここでは隠し入力の代わりに隠しテキストエリアを使用していることに注意してください。データにはキャリッジ リターンとライン フィードが含まれている可能性があるため、">
2. iframe 呼び出しを使用します (一部はオブジェクト呼び出しと重複しています)。
1. Web ページに埋め込む方法: 次の HTML コードを追加します。埋め込む必要があります: 「src=」に続くデータは、呼び出したいオンライン エディタ ページです。パスと ID は、IFRAME を呼び出すときに取得する ID、幅と高さは、その高さと幅です。エディター
2. HTML エディターでデータを取得する方法: 送信する必要があるすべてのコンテンツをフォームに配置することもできます ( または ) 送信時に HTML オンラインエディタのデータを一時的に保存し、隠しテキストエリアを使用して取得しますデータ。フォームが送信されると、オブジェクトの内容が隠しテキスト領域にコピーされます。詳細なコードは次のとおりです。
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}





ページ内バックグラウンドで処理 隠し領域のコンテンツのデータを取得することで、HTMLオンラインエディタのデータを直接取得できます。
2. HTML エディターでデータを取得する方法: 送信する必要があるすべてのコンテンツをフォームに配置します。同時に、隠しテキストも設定できます。エリア ( または ) は、HTML のオンライン編集時に一時的に保存するために使用されます。フォーム内のオブジェクトの内容は、asp、jsp、php では直接取得できないため、隠しテキスト領域を使用してデータを取得する必要があります。フォームが送信されると、オブジェクトの内容が隠しテキスト領域にコピーされます。詳細なコードは次のとおりです。

<フォームメソッド="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">



このようにして、バックグラウンド処理されたページで、隠し領域のコンテンツのデータを取得することで、HTMLオンラインエディターのデータを直接取得できます。
3. テキスト エディターの HTML オンライン エディターにローカル画像をアップロードする方法: まず、画像を挿入するボタンをクリックすると、画像をアップロードするウィンドウがポップアップします。ローカル画像を にアップロードするために作成したプログラムを使用します。次に、画像のパスを記録し、HTML オンライン エディターを呼び出す関数を Web ページに記述して、カーソル位置に画像を表示する HTML タグを挿入する必要があります。詳細な説明とコードは次のとおりです。
エディターで、挿入するボタンにイベント onclick="window.open('img_upload.asp','img_upload','width=481 height=190')" を追加します。画像> エディターを呼び出すページで、エディターに HTML コードを挿入する関数を定義します

これにより、アップロードされた画像をエディタに簡単に挿入できます。
4. 記事の編集および変更時に HTML オンライン エディターを呼び出してデータを変更する方法: データを変更してデータベースに送信するために HTML オンライン エディターを追加するときは、記事のコンテンツも編集できる必要があります。 HTML プロセッサを使用してデータベースをオンラインで変更します。まず、データベースにコンテンツを配置するための非表示領域をフォームに追加します。例: 、ここではエディタを呼び出す iframe に