Ckeditor in MPA CreateOrEditModal.cshtml #1698

4 Answer(s)

• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  It's hard to simulate same case. If you can share your project with a private email, we can take a look at it.

  Save Cancel
• 

  0

  kythor created 8 years ago

  This is what I did:

  • add <script src="//cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script> to index.cshtml
  • add this to _createOrEditModel.cshtml

  <textarea class="form-control@(Model.Article.Body.IsNullOrEmpty() ? "" : " edited")" name="Body" id="Body" tabindex="1" required>@Model.Article.Body</textarea>
                      
                      <script type="text/javascript">
                                     CKEDITOR.replace('Body');
                      </script>
  

  this will create the CKEditor field without problems. But first thing you will see is that when adding a picture or a link, the extra CKEditor popup will be behind the current modal. This can be "fixed" with adding extra css:

  .modal-dialog {
                  width:800px !important;
                  margin: 30px auto
              }
  
          .cke_dialog {
              z-index: 1000001 !important;
          }
  
          .cke_panel {
              z-index: 1000002 !important;
          }
  
                 .cke_skin_v2 input.cke_dialog_ui_input_text, .cke_skin_v2 input.cke_dialog_ui_input_password {
              background-color: white;
              border: none;
              padding: 0;
              width: 100%;
              height: 14px;
              /* new lines */
              position: relative;
              z-index: 1000003 !important;
          }
  

  the ckeditor popup will now display in front of the modal, but you cannot edit the fields. That's where I am stuck for now.

  Save Cancel
• 

  0

  kythor created 8 years ago

  I switched to TinyMCE, and I got it working but I had to add this script to Index.html:

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

  now I need to add code to the "open" function of the modal, I tried this, but it doesnt work:

  (_permissions.edit) {
                              $('<button class="btn btn-default btn-xs" title="' + app.localize('Edit') + '"><i class="fa fa-edit"></i></button>')
                                  .appendTo($span)
                                  .click(function () {
                                      debugger;
                                      _createOrEditModal.open({
                                          id: data.record.id
                                          
                                      },
                                      function (event, ui) {
                                          tinyMCE.init({
                                              selector: '#Body',
                                              height: 600,
                                              theme: 'modern'
                                          });
                                      });
                                  });
                          }
  

  Save Cancel
• 

  0

  kythor created 8 years ago

  Success!

  I got it to work! This is how:

  add to Index.cshtml:

  @section Scripts
  {
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  
   @Html.IncludeScript("~/Areas/Mpa/Views/Articles/_CreateOrEditModal.js")
      @Html.IncludeScript("~/Areas/Mpa/Views/Articles/Index.js")
  
  <script>
          $(document).on('focusin', function (e) {
              if ($(e.target).closest(".mce-window, .moxman-window").length) {
                  e.stopImmediatePropagation();
              }
          });
  </script>
  }
  

  add this to _CreateOrEditModal.cshtml

  <textarea class="form-control tinymce" name="Body" id="Body" tabindex="1" required>@Model.Article.Body</textarea>
                      
                      <script type="text/javascript">
                          for (var i = tinymce.editors.length - 1 ; i > -1 ; i--) {
                              var ed_id = tinymce.editors[i].id;
                              tinyMCE.execCommand("mceRemoveEditor", true, ed_id);
                          }
                          tinymce.init({
                              selector: '#Body',
                              height: 600,
                              theme: 'modern',
                              plugins: [
                                'advlist autolink lists link image charmap preview hr anchor pagebreak',
                                'searchreplace wordcount visualblocks visualchars code fullscreen',
                                'insertdatetime media nonbreaking save table contextmenu directionality',
                                'emoticons template paste textcolor colorpicker textpattern imagetools'
                              ],
                              toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                              toolbar2: 'preview media | forecolor backcolor emoticons',
                              image_advtab: true,
                              templates: [
                                { title: 'Test template 1', content: 'Test 1' },
                                { title: 'Test template 2', content: 'Test 2' }
                              ],
                              content_css: [
                                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                                '//www.tinymce.com/css/codepen.min.css'
                              ]
                          });
                          
                          
                      </script>
  

  Save Cancel