web-dev-qa-db-ja.com

TinyMCE 4リンクプラグインモーダルが編集不可

Boostrapモーダルダイアログ内でtinyMCE4エディターを使用しています。リンクアイコンをクリックすると、新しいモーダルダイアログボックスが開きます。表示は適切ですが、入力領域を編集できません。

<div id="editing" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form>
    <label>
      <span>Description</span>
      <div id="description"></div>
    </label>
     <form>
 </div>

  <script>
    tinymce.init({
    selector: 'div#description',
    inline: false,
    theme : "modern",
    schema: "html5",
    add_unload_trigger: false,
    statusbar: false,
    plugins: "link",
    toolbar: "link | undo redo",
    menubar: false
 });
    </script>

enter image description here

助言がありますか

前もって感謝します

jquerytwitter-bootstrapruby-on-rails-3.2tinymce-4tinymce-rails
36
prabu

https://github.com/tinymce/tinymce/issues/782 から

JQuery UIダイアログの場合、これを行うことができます：

$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".mce-container").length || this._super( event );
    }
});

これは、Bootstrap用に変更できるより一般的なソリューションのようです。

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

更新：

Ag-gridの新しいバージョン（20.2.0）では、シルバーテーマを使用している場合、mce-windowはtox-dialogに名前が変更されたため、ターゲットクラスを変更できます。

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".tox-dialog").length) {
        e.stopImmediatePropagation();
    }
});
68
Harry

この問題にも遭遇しました。彼のJSでprabuによって提供されたコードFiddleは、ほぼ完全に機能しました。

MoxieManagerフィールドが開いているときにも機能するように、少し変更する必要がありました。

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
        e.stopImmediatePropagation();
    }
});

これにより、Bootstrap Modal内で開いたときにMoxieManagerで画像を編集したりファイルパスの名前を変更したりすることができます。ありがとうございます。

8
AverageJoe

報告された例： http://fiddle.jshell.net/e99xf/13/show/light/

古いバージョンのbootstrap（2.3.2）およびjQuery（1.8.3）

私は最新バージョンで同じことを試みていますが、うまくいきません：Bootstrap 3.3.7/jQuery 3.2.1

以下は私が使用しているものです（入力したリンクが古いバージョンのjsで完全に機能することを思い出してください）。

ps。私はw3schools.comエディターを使用しています

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"type=" text/javascript"></script>  
</head>
<body>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
tinymce.init({
    selector: "textarea",
    width:      '100%',
    height:     270,
    plugins:    [ "anchor link" ],
    statusbar:  false,
    menubar:    false,
    toolbar:    "link anchor | alignleft aligncenter alignright alignjustify",
    rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
});

/**
 * this workaround makes magic happen
 * thanks @harry: http://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable
 */
$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
    }
});
});//]]> 

</script>

<div class="container">
  <h2>Modal Example</h2>


     <div class="col-sm-8">
       <div class="form-group">          
        <br>
        <label for="BL_DEF_MASCARA" class="control-label">Texto a ser exibido</label>
        <br>

        <div class="help-block with-errors"></div>
       </div>
     </div>  
<br>

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <textarea rows="4" cols="100" class="form-control" name="BL_DEF_MASCARA"></textarea>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
2
Felipe Leal

上記の答えはBootstrap v4およびTinyMCE v5では機能しないようです。これは修正されたソリューションで機能するはずです。

  $(document).on('focusin', function(e) {
        if ($(e.target).closest(".tox-textfield").length)
            e.stopImmediatePropagation();
  });
1
RV_dutchman

2019ソリューション：

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});
1
charlie

最後の回避策は、表示されるダイアログのZインデックスをモーダルダイアログのZインデックスよりも高く設定することでした。たとえば、これはトリックを行います：

$(document).on('focusin', function(e) {
        if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root, .tox-dialog").length) {
            $('.tox-dialog').css('z-index', '2003');
            e.stopImmediatePropagation();
        }
    });

cSSもグローバルに設定できることを確認してください

0
TommyTheG

試す

event.stopImmediatePropagation（）;

の代わりに

e.stopImmediatePropagation（）;

私のために働いた

0
user3203126

このページのソリューションは、Firefoxで機能しないようです。

chrome以下のコードを実行すると、フォーカスイベントが発生します。イベントをeパラメータに変更すると、Chromeでは機能しません。

chrome=で解決するイベントはフォーカスイベントと呼ばれます。Firefoxでこれを見つけることができませんでした。

誰でもそれをFirefoxで動作させましたか？

$(document).on('focusin', (e) => {
    if ($(event.target).closest('.mce-window').length) {
      event.stopImmediatePropagation(); 
   }
});
0
grimur82

私の場合、それは次のコードで解決されました：

$(document).on('focusin', (e) => {
    if ($(e.target).closest('.mce-window').length) {
       $('.ModalHeader').attr('tabindex', '');
   }
});
0
Flavio H. Freitas