WangEditorリッチテキストエディタ、テキストを使用してデータセットを返送するのは簡単

wangEditorは、Webエディタ、最終用途、機能はかなり完了です

wangEditorの簡単な使用記録

ダウンロードしてビルドwangEditor関連のjarパッケージ
コンテンツは、HTMLの形で入力wangEditorサーブレットに送信されます。

ビルドにwangEditor

最初のステップ：jarファイルパッケージをダウンロード

2つのJARパッケージを使用するために使用wangEditorの必要性は、一つは「wangEditor.min.js」これはJQまた、ファイル「jqueryの-3.3.1.min.js」をダウンロードする必要があり、引用wangEditorです

ステップ2：これらの2つの参照は、jarファイルのパッケージをダウンロード

    <スクリプトSRC = "$ {} pageContext.request.contextPath /js/wangEditor.min.js"> </ SCRIPT>
    </スクリプト> <スクリプトSRC = "$ {pageContext.request.contextPathは} /js/jquery-3.3.1.min.js">

ステップ3：入力インタフェースの内容を書き込み、プロパティは非表示テキストエリアに設定されているのdivコントロールとコントロールのTextAreaコンポーネントは、表示されません通常あり、コントロールがdiv要素であるため、主に、コンテンツの内容wangEditorやコンビニエンス舞台裏のアクセスを格納するために使用されます「名前」属性を提供していません。

　　　　私は、中にフォームコントロールにこれらの2つのコントロールの下で簡単にするために、バックグラウンドに送信されたコンテンツデータを容易にするために、ここにいます

<フォームメソッド= "ポスト" アクション= "に、MyServlet">
    <div>
        <％ - テキストエディット - ％>
        <DIV ID = "イントロ" クラス = "のTextContent"> </ div>
        <TEXTAREAのスタイル= "表示：なし" 名前= "mytxtIntro" ID = "txtIntro"> </ TEXTAREA>
        <％ -  submitボタン - ％>
        <入力クラス = "BTN BTN原色"タイプ= "提出"値= "确认提交">
    </ div>
</フォーム>

ステップ4：jsのコードの実装

<％ - テキストエディタプラグインJS  - ％>
ます。<script type = "text / javascriptの"> 
    のvar E = window.wangEditor。
    VARエディタ = 新しい AND（ '＃イントロ' ）;

    //     IDの隠された制御<TEXTAREA>を取得し、コンテンツを表示するため、背景にも便利取得したコンテンツである 
    VAR $テキスト1 = $（「＃txtIntro」）;

    // wangEditorの内容の変化を監視し、同期およびTextAreaにHTMLコンテンツを更新 
    editor.customConfig.onchange = 関数（HTML）{
        $ text1.val（HTML）。
    }

    //     セットは、サーバーへのローカル画像をアップロード 
    editor.customConfig.uploadImgServer =「/アップロード」;
    editor.create（）;
    text1.val $（editor.txt.html（））; //は、テキストエリアの値を初期化


</ SCRIPT>

全体のコードを見てください：

<％ - のIntelliJ IDEAによって作成されます。 - ％>
<％@ページのcontentType = "text / htmlの;のcharset = UTF-8" 言語= "javaの" ％>
<HTML>
<ヘッド>
    <タイトル> </ TITLE>
    <スクリプトSRC = "$ {} pageContext.request.contextPath /js/wangEditor.min.js"> </ SCRIPT>
    </スクリプト> <スクリプトSRC = "$ {pageContext.request.contextPathは} /js/jquery-3.3.1.min.js">


</ head>の
<身体>

<フォームメソッド= "ポスト" アクション= "に、MyServlet">
    <div>
        <％ - テキストエディット - ％>
        <DIV ID = "イントロ" クラス = "のTextContent"> </ div>
        <TEXTAREAのスタイル= "表示：なし" 名前= "mytxtIntro" ID = "txtIntro"> </ TEXTAREA>
        <％ -  submitボタン - ％>
        <入力クラス = "BTN BTN原色"タイプ= "提出"値= "确认提交">
    </ div>
</フォーム>

</ BODY>


<％ - テキストエディタプラグインJS  - ％>
ます。<script type = "text / javascriptの"> 
    のvar E = window.wangEditor。
    VARエディタ = 新しい AND（ '＃イントロ' ）;

    //     IDの隠された制御<TEXTAREA>を取得し、コンテンツを表示するため、背景にも便利取得したコンテンツである 
    VAR $テキスト1 = $（「＃txtIntro」）;

    // wangEditorの内容の変化を監視し、同期およびTextAreaにHTMLコンテンツを更新 
    editor.customConfig.onchange = 関数（HTML）{
        $ text1.val（HTML）。
    }

    //     セットは、サーバーへのローカル画像をアップロード 
    editor.customConfig.uploadImgServer =「/アップロード」;
    editor.create（）;
    text1.val $（editor.txt.html（））; //は、テキストエリアの値を初期化


</ SCRIPT>


</ HTML>

ここでは、効果が達成されている見ることができます

背景データの送信内容は、非常に簡単に達成することもあるサーブレットクラスに隠されたTextAreaコントロールにライン上の内容を受け、以下のサーブレットのコードです

輸入javax.servlet.ServletException;
輸入javax.servlet.annotation.WebServlet;
輸入javax.servlet.http.HttpServlet。
インポートのjavax.servlet.http.HttpServletRequest;
インポートのjavax.servlet.http.HttpServletResponse;
インポートにjava.io.IOException;

@WebServlet（名 = "に、MyServlet"、urlPatterns = "/に、MyServlet" ）
 パブリック クラスに、MyServletは延びHttpServletを{
     保護された ボイドのdoPost（HttpServletRequestのリクエスト、HttpServletResponseの応答）がスローServletExceptionが、IOExceptionが{
        doGet（リクエスト、レスポンス）。
    }

    保護された ボイドのdoGet（HttpServletRequestのリクエスト、HttpServletResponseの応答）がスローServletExceptionが、IOExceptionが{
        文字列s = request.getParameter（ "mytxtIntro" ）。
        System.out.println（S）;
    }
}

WangEditorリッチテキストエディタ、テキストを使用してデータセットを返送するのは簡単

wangEditorは、Webエディタ、最終用途、機能はかなり完了です

ダウンロードしてビルドwangEditor関連のjarパッケージ

コンテンツは、HTMLの形で入力wangEditorサーブレットに送信されます。

最初のステップ：jarファイルパッケージをダウンロード

ステップ2：これらの2つの参照は、jarファイルのパッケージをダウンロード

ステップ4：jsのコードの実装

背景データの送信内容は、非常に簡単に達成することもあるサーブレットクラスに隠されたTextAreaコントロールにライン上の内容を受け、以下のサーブレットのコードです

ここでは、バックグラウンド効果の内容は、データと出力を受け取った後、私は1つの出力は、ページ上の効果である、二つの出力を書いた、1は、コンソール出力が有効です

エディタの効果：

ページの出力効果：

コンソール出力効果：

おすすめ