リッチテキストエディタのVUE TinyMCEの使用、低レベルの問題で解決TinyMCEをするダイアログボックス

1、インストール

NPMインストールTinyMCEの-S

2は、TinyMCEのを含んで、フォルダ、ファイル内のnode_modules \ TinyMCEのに図のように、すべての静的フォルダをコピーします。

3、TinyMCEのデフォルトインターフェイスは英語ですが、また、中国の言語パックzh_CN.jsをダウンロードする必要があります

https://www.tiny.cloud/get-tiny/language-packages/

TinyMCEののlangsフォルダを新しいフォルダには、言語パックは、langs図以下のフォルダにダウンロード。

4、main.jsに導入TinyMCEの

5、新しいEditor.vueファイルフォルダコンポーネント

Editor.vue：

< テンプレート> 
  < divのクラス= "SEditor" > 
    < textareaのクラス= "my_editor" ID = "編集" Vモデルは= "Editortext" > </ TEXTAREA > 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
    輸出デフォルト{ 
        小道具：{ 
            EditorTexts：'' 
        }、
        データ（）{ 
            リターン{ 
                Editortext：'' 、
            } 
        }、
        計算：{ 

        }、
        時計：{ 
            EditorTexts：関数（newValに、OLDVAL）{ 
                にconsole.log（newValに）
                この.Editortext = newValに
                tinyMCE.activeEditor.setContent（newValに）
            } 
        }、
        {）（取り付けられた
            本）（.tinymceします。
        }、
        beforeDestroy（）{ 
            この$ tinymce.remove（）
        }、
        メソッド：{ 
            TinyMCEの（）{ 
                _thisはせ=  この; 
                _this。$ tinymce.baseURL =  "/静的/ TinyMCEの' 
                _this $ tinyMCE.init（{。
                    セレクター：" #editor " 、
                    language_url：' ../../../../static/tinymce/langs/zh_CN.js " 、// セット中国
                    言語：「zh_CNに」、
                    プラグイン：[ // のconfigureプラグ：自分自身を自由に選択することが、それはローカルの画像や画像imagetoolsをアップロードする場合が必要であることができます
                        「advlist自動リンクリンクリストcharmapのプレビュー画像HRアンカー改ページ」、
                    ]、
                    // ツールボックスまた、独自の設定への無料
                    ツールバー：「 
                    }、アンドゥリドゥinsertfile | styleselect | ボールドイタリック| alignleft aligncenter alignright alignjustify | bullist numlistインデント解除インデント| リンク画像| 前景色背景色' 
                    image_advtab：真、
                    image_dimensions：真、
                    幅：' 97％' 
                    高さ：380 、
                    table_default_styles：{ 
                        幅：' 100％' 
                        borderCollapse：' 崩壊」
                    image_title。 falseに、// 画像タイトルセットを選択するようになって、ここには設けられていない
                    automatic_uploadsを：trueに、
                     // 画像のアップロード非同期ハンドラ
                    images_upload_handler：（blobInfo、成功、失敗）=> {
                         VAR FORMDATA; 
                        FORMDATA =  新しい新しいいるFormData（）; 
                        formData.append（' ファイル' 、blobInfo.blob（））;
                         // formData.append（ 'グループ'、 '編集'）; 
                        // _this $ requestPostこれは私が背景画像のアップロード・インターフェースと呼んでいます。
                         CONST img_file =blobInfo.blob（）
                        はconsole.log（blobInfo.blob（））
                        _this $ requestPost（{。
                            URL：" ？/ baseapi /ファイル=エディタグループ" 、
                            のparams：FORMDATA、
                        }、データ=> { 
                            成功（' API ' + data.url）
                             // URLアドレスがそうでなければ絵がリッチテキストボックスに表示されなくなり、正確にスプライシングされなければならない
                        }、ERR => { 
                            失敗（「アップロードに失敗しました）
                        }）'
                    }、
                    Init_instance_callback：機能（編集）{ 
                        editor.on（' keyUpイベント' 、（）=> {
                             // 内部コンテンツリッチテキストエディタ得る
                            _this.Editortext = editor.getContent（）;
                             // editor.setContent（_thisを。 Editortext）

                        }）; 
                    }、
                    セットアップ：（編集）=> {
                         //は'に対応'スローイベントフック
                        editor.on（
                             ' INIT ' 、（）=> {
                                 // はconsole.log（_this.Editortext）
                                // はconsole.log（_this.EditorTexts）
                                // Editortextデータを割り当てられた小道具値で監視
                                _this。 Editortext = _this.EditorTexts 
                                editor.setContent（_this.Editortext）
                            } 
                        ）
                        // '入力'フックイベント、同期データ値スロー
                        editor.onを（
                             ' INPUT変更使用して再実行を取り消します' （、） =>を{
                                _this。$ EMIT（' INPUT ' 、editor.getContent（））
                            } 
                        ）
                    } 
                    }）。次に、（解決=> {
                     // リッチテキストエディタ内の内容初期化
                    決意を[ 0 ] .setContent（_this.Editortext）

                }） ; 
            }、

        } 
    } 
</ スクリプト> 

< スタイル> 

</ スタイル>

成分を導入するために必要とされる6、

7、問題の解決TinyMCEの低レベルにダイアログボックス内の？？？

方法很简单，找到F:\hzyy-htnew\static\tinymce\skins\ui\oxide下面的skin.min.css文件，将里面的z-index统一后面加五个零

参考链接：tinymce中文文档 https://www.cnblogs.com/jvziking/p/12028275.html

富文本编辑器tinymce获取文本内容和设置文本内容：https://blog.csdn.net/u012679583/article/details/50505842

初始化：https://segmentfault.com/a/1190000012791569

主要参考：https://blog.csdn.net/vipsongtaohong/article/details/89553271

リッチテキストエディタのVUE TinyMCEの使用、低レベルの問題で解決TinyMCEをするダイアログボックス

おすすめ