リッチテキストエディタTinyMCEの例と設定

デモリンク：

https://download.csdn.net/download/silverbutter/10557703

時にはあなたは、コンプライアンス（空でない）のためにTinyMCEエディタの内容を確認する必要があり、我々は内部の内容を取得する必要があります。

：現在のページは一つだけのエディタがあれば1、
コンテンツ取得：tinyMCE.activeEditor.getContent（）
セット内容：tinyMCE.activeEditor.setContentを（「編集内容を設定する必要があります」）

2、現在のページが（「[0]」エディタを示し、など以下）エディタ複数有する場合：
コンテンツ取得：tinyMCE.editors [0] .getContent（）
セット内容：tinyMCE.editorsを[ 0] .setContent（「編集内容を設定する必要があります」）

図3に示すように、HTMLタグのプレーンテキストコンテンツを取得することなく：
VAR = activeEditor tinymce.activeEditor;
VAR editBody activeEditor.getBody =（）;
activeEditor.selection.select（editBody）;
VAR = activeEditor.selection.getContentテキスト（{ 'フォーマット' 「テキスト」}）。

HTMLのコード例：

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< メタ文字コード= "UTF-8" > 
    < タイトル> TinyMCEの4エディタ</ タイトル> 
</ ヘッド> 
< 身体> 

< スクリプトタイプ= "テキスト/ javascriptの" SRC = "HTTPS： //cdn.bootcss.com/jquery/3.2.1/jquery.js」> </ スクリプト> 
< スクリプトタイプ= "テキスト/ javascriptの" SRC = "tinymce.min.js" > <
スクリプトタイプ= "テキスト/ javascriptの" SRC = "jquery.tinymce.min.js" > </ スクリプト> 
< スクリプトタイプ= "テキスト/ javascriptの" > 
    tinymce.init（{ 
        セレクタ：" #txt " 、
        プラグイン：[ 
            " advlist自動リンク自動保存リンク画像リストは、印刷プレビュー時間アンカー改ページのスペルチェッカをCHARMAP 「」searchreplace WORDCOUNT visualblocks visualcharsコードフルスクリーンInsertDateTimeをメディア改行「」テーブルコンテキストメニュー方向性の絵文字は、フルページtextcolorはのcodesampleを貼り付けTEXTCOLORテンプレート
        "] 
        toolbar1を：" REDOを元に戻します| カットコピーペースト| ボールドイタリック下線取り消し線| alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect " 
        toolbar2：" searchreplace | bullist numlist | インデント解除インデントBLOCKQUOTE | リンクアンリンクアンカー画像メディアコードcodesample | inserttimeプレビュー| 前景色背景色" 
        toolbar3："
表| 時間のremoveformat | 下付き上付き| charmapの顔文字| 印刷フルスクリーン| LTRのRTL | スペルチェッカ| visualchars visualblocks改行テンプレート改ページrestoredraft 」、

        メニューバー：偽、
        toolbar_items_size：' 小' 、

        style_formats：[ 
            {タイトル：' 太字' 、インライン：' B ' }、
            {タイトル：' 赤いテキスト' 、インライン：' スパン' 、スタイル：{色：' ＃1 FF0000 ' }}、
            {タイトル： }、' 赤ヘッダ' 、ブロック：' H1 ' 、スタイル：{色：' ＃1 FF0000 ' }}、
            {タイトル：' 実施例1 ' 、インライン：' スパン' 、クラス：' 例1 ' }、
            {タイトル：' 例2 ' インライン：' スパン' クラス：' 例2 ' }、
            {タイトル：' 表スタイル' 
            {タイトル：'表の行1 ' 、セレクタ：' TR ' 、クラス：' tablerow1 ' } 
        ]、

        テンプレート：[ 
            {タイトル：' テストテンプレート1 ' 、コンテンツ：' 試験1 ' }、
            {タイトル：「テストテンプレート2 ' コンテンツ：' テスト2 ' } 
        ]、
        言語：' zh_CNに' 
    }）。</ スクリプト> 

<メソッド= "ポスト" アクション= "somepage" > 
    < TEXTAREAの名前= "コンテンツ" ID = "TXT" スタイル= "幅：100％" > </ TEXTAREA > 
</ 形成> 
< ボタンのID = "BTN" >提交< / ボタン> 
< プレID = "XX" > </ プレ> 
</ ボディ> 
        < スクリプトタイプ= "テキスト/ javascriptの" >
               $（" #btn " ）.click（関数（）{ 
                 
                   $（" #XX " ）の.html（tinyMCE.activeEditor.getContent（））。
               }）
        </ スクリプト> 
</ HTML >

リッチテキストエディタTinyMCEの例と設定

おすすめ