New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cannot submit form data from source code mode, need to enable WYSIWYG mode #1529

Open
alligator77 opened this Issue Dec 22, 2015 · 10 comments

Comments

Projects
None yet
7 participants
@alligator77

alligator77 commented Dec 22, 2015

Probably I am find bug..
Summernote cannot submit form data from 'source code' mode, need to enable WYSIWYG mode for submit form

Example screencast http://screencast.com/t/YZF1AKrBQ

Sample script (modified example file codemirror.html from 0.7.0 release)

<?php
    $data = (!$_POST['summernote']) ? '<b>test</b> sample TEXT' : $_POST['summernote'];
?><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <title>summernote - codemirror</title>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
  <link rel="stylesheet" href="../dist/summernote.css">
  <script type="text/javascript" src="../dist/summernote.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.summernote').summernote({
        height: 200,
        tabsize: 2,
        codemirror: {
          theme: 'monokai'
        }
      });
    });
  </script>
</head>
<body>
<pre>
    <?= $data ?>
</pre>
<form method="post">
<textarea class="summernote" name="summernote"><?= $data ?></textarea>
    <input type="submit" value="Send" />
</form>
</body>
</html>

@alligator77 alligator77 changed the title from summernote 0.7.0 cannot submit form data from source code mode, need to enable WYSIWYG mode to cannot submit form data from source code mode, need to enable WYSIWYG mode Dec 22, 2015

@hackerwins

This comment has been minimized.

Show comment
Hide comment
@hackerwins

hackerwins Dec 27, 2015

Member

@alligator77 Thanks for reporting.
You can switch mode with external API.

if ($('.summernote').summernote('codeview.isActivated')) {
  $('.summernote').summernote('codeview.deactivate');
}
Member

hackerwins commented Dec 27, 2015

@alligator77 Thanks for reporting.
You can switch mode with external API.

if ($('.summernote').summernote('codeview.isActivated')) {
  $('.summernote').summernote('codeview.deactivate');
}
@hackerwins

This comment has been minimized.

Show comment
Hide comment
@hackerwins

hackerwins Dec 27, 2015

Member

But I want to know about Summernote cannot submit form data from 'source code' mode,
I can't find bug for codeview.
dec 27 2015 12 59

Member

hackerwins commented Dec 27, 2015

But I want to know about Summernote cannot submit form data from 'source code' mode,
I can't find bug for codeview.
dec 27 2015 12 59

@alligator77

This comment has been minimized.

Show comment
Hide comment
@alligator77

alligator77 Dec 27, 2015

hackerwins, Your temporary solution is working well. Tnx.

alligator77 commented Dec 27, 2015

hackerwins, Your temporary solution is working well. Tnx.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Mar 22, 2016

Is there any reason why the toolbar needs to be disabled when in code view, or made via an option to NOT be disabled, that way html elements could easily still be added as they are in normal mode?

ghost commented Mar 22, 2016

Is there any reason why the toolbar needs to be disabled when in code view, or made via an option to NOT be disabled, that way html elements could easily still be added as they are in normal mode?

@lqez

This comment has been minimized.

Show comment
Hide comment
@lqez

lqez Mar 23, 2016

Member

@alligator77, @hackerwins I got a similar problem with this.
I'm using onBlur to get a chance to copy contents from summernote('code') to hidden textarea, but it does not fire onBlur while editing in codeview.

This is what I discussed in chat with @easylogic - “How about to make a blur event on codeview?”

Member

lqez commented Mar 23, 2016

@alligator77, @hackerwins I got a similar problem with this.
I'm using onBlur to get a chance to copy contents from summernote('code') to hidden textarea, but it does not fire onBlur while editing in codeview.

This is what I discussed in chat with @easylogic - “How about to make a blur event on codeview?”

@atom0s

This comment has been minimized.

Show comment
Hide comment
@atom0s

atom0s May 25, 2016

Having this issue with Summernote v0.8.1 when submitting from codeview. Using a standard html form to handle the summernote instance in a textarea like this:

<form role="form" action="/test" method="POST">
    <div class="container" id="testeditor">
        <div class="form-group">
            <textarea class="form-control summernote" type="text" name="testtext"
                      rows="25">@model.testtext</textarea>
        </div>
    </div>
</form>

I'm using Vash as my template engine which handles the @ model object. testtext is just the form data spewed back to the page. When in normal editing mode (WYSIWYG) the display is fine and submitting the form data works. When in codeview, I have the same issue where the data is never updated so any new edits do not get submitted.

If I switch back to WYSIWYG mode before submitting the form, it works fine.

atom0s commented May 25, 2016

Having this issue with Summernote v0.8.1 when submitting from codeview. Using a standard html form to handle the summernote instance in a textarea like this:

<form role="form" action="/test" method="POST">
    <div class="container" id="testeditor">
        <div class="form-group">
            <textarea class="form-control summernote" type="text" name="testtext"
                      rows="25">@model.testtext</textarea>
        </div>
    </div>
</form>

I'm using Vash as my template engine which handles the @ model object. testtext is just the form data spewed back to the page. When in normal editing mode (WYSIWYG) the display is fine and submitting the form data works. When in codeview, I have the same issue where the data is never updated so any new edits do not get submitted.

If I switch back to WYSIWYG mode before submitting the form, it works fine.

@richshakespeare

This comment has been minimized.

Show comment
Hide comment
@richshakespeare

richshakespeare Jun 11, 2016

I'm also seeing the exact same bug reported above. The workaround of switching view isn't ideal unfortunately, given it resets cursor position and is visibly jarring to the end user.

richshakespeare commented Jun 11, 2016

I'm also seeing the exact same bug reported above. The workaround of switching view isn't ideal unfortunately, given it resets cursor position and is visibly jarring to the end user.

@richshakespeare

This comment has been minimized.

Show comment
Hide comment
@richshakespeare

richshakespeare Jun 11, 2016

The workaround I'm using is just as much of a hack, but it resolves the problem of needing to switch editors.

In onInit of Summernote I'm putting in a handler to detect keyups on the codemirror, then immediately transfer them to the main Summernote WYSIWYG.

onInit: function(container) { $('body').on('keyup', '.note-editing-area textarea', $(container), function() { var html = $('.note-codable').data('cmEditor').getValue(); $('.wysiwyg').val(html); }); }

richshakespeare commented Jun 11, 2016

The workaround I'm using is just as much of a hack, but it resolves the problem of needing to switch editors.

In onInit of Summernote I'm putting in a handler to detect keyups on the codemirror, then immediately transfer them to the main Summernote WYSIWYG.

onInit: function(container) { $('body').on('keyup', '.note-editing-area textarea', $(container), function() { var html = $('.note-codable').data('cmEditor').getValue(); $('.wysiwyg').val(html); }); }

@razvanphp

This comment has been minimized.

Show comment
Hide comment
@razvanphp

razvanphp Oct 3, 2018

Contributor

Any hint on how to solve this via a PR? This is killing productivity big time... Thank you!

Contributor

razvanphp commented Oct 3, 2018

Any hint on how to solve this via a PR? This is killing productivity big time... Thank you!

@limitlesspro

This comment has been minimized.

Show comment
Hide comment
@limitlesspro

limitlesspro Oct 10, 2018

Multiple summernotes on one page ('English','Deutsch', etc). This one works fine for me:

callbacks: {
    onInit: function (container) {
        $('.btn-submit').on('click',function(){ 
            $(".summernote").each(function (index) { 
                if ($(this).summernote('codeview.isActivated')) {
                    $(this).summernote('codeview.deactivate');
                }
            });
        });
    }
}

limitlesspro commented Oct 10, 2018

Multiple summernotes on one page ('English','Deutsch', etc). This one works fine for me:

callbacks: {
    onInit: function (container) {
        $('.btn-submit').on('click',function(){ 
            $(".summernote").each(function (index) { 
                if ($(this).summernote('codeview.isActivated')) {
                    $(this).summernote('codeview.deactivate');
                }
            });
        });
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment