cant send froala text editor to action method

Question

User-1045082127 posted

<g class="gr_ gr_732 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="732" data-gr-id="732">hello</g> there <g class="gr_ gr_33 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="33" data-gr-id="33">im</g> using <g class="gr_ gr_34 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="34" data-gr-id="34">mvc</g> 5 and Id <g class="gr_ gr_720 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="720" data-gr-id="720">would  to</g> use <g class="gr_ gr_106 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="106" data-gr-id="106">froala</g> text editor in our project.

but I <g class="gr_ gr_208 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="208" data-gr-id="208">cant</g> send this value (<g class="gr_ gr_252 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="252" data-gr-id="252">froala</g> text editor <g class="gr_ gr_282 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="282" data-gr-id="282">html</g>) to the action methods. by using any existence method <g class="gr_ gr_363 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="363" data-gr-id="363"><g class="gr_ gr_368 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Punctuation only-del replaceWithoutSep" id="368" data-gr-id="368">like </g></g><g class="gr_ gr_376 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="376" data-gr-id="376"><g class="gr_ gr_363 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="363" data-gr-id="363"><g class="gr_ gr_368 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Punctuation only-del replaceWithoutSep" id="368" data-gr-id="368">:</g></g>unobtrusive</g> <g class="gr_ gr_411 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="411" data-gr-id="411">ajax  </g><g class="gr_ gr_409 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="409" data-gr-id="409"><g class="gr_ gr_411 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="411" data-gr-id="411">,</g>jquery</g> ajax even simple way (direct way) how can I do that using <g class="gr_ gr_670 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="670" data-gr-id="670">ajaxy</g> way??

Answer 1

User-821857111 posted

Assume you have your editor set up like the documentation (https://www.froala.com/wysiwyg-editor/docs/concepts/save/inside-form):

<form action="save" method="POST" id="myform">
  <textarea name="editor_content" id="myEditor"></textarea>
  <button>Submit</button>
</form>

<script>
  new FroalaEditor('#myEditor', {toolbarInline: false})
</script>

Now assume that you want to post this value to the Edit action on a News controller using jQuery AJAX, you would do this:

$.post('/news/edit/', {content: $('#myEditor').val()}, function(){...}); 

Your edit action will either have a parameter which is either a string named "content" or a class with a property called "content" so that model binding will take care of assigning the posted value to it.

Note also, that if you are generating the form using a helper (e.g. Html.BeginForm), you will also need to ensure that you include the Request verification token in the ajax post otherwise the server will return a 400 Bad Request status code. The easiest way to do that is just to serialise the entire form:

$.post('/news/edit/', $('#myform').serialize(), function(){...}); 

Answer 2

User1520731567 posted

Hi aminsoraya,

but I cant send this value (froala text editor html) to the action methods. by using any existence method like :unobtrusive ajax  ,jquery ajax even simple way (direct way) how can I do that using ajaxy way??

Do you mean the html of the content in froala text editor?

If so,I make a simple demo,and you just add @section scripts{} to add default js packages from Layout,rather than unobtrusive ajax  ,jquery ajax,

you could refer to:

Controller:

public ActionResult FroalaEditor()
        {
            return View();
        }

        [HttpPost]
        [ValidateInput(false)]
        public JsonResult FroalaEditorajax(string ajaxdata)
        {

            return Json(new { message = 1111 }, JsonRequestBehavior.AllowGet);
        }

View:

<div id="froala-editor">
    <p>Click the Code View button to see the editor content's HTML.</p>
</div>
<input type="button" onclick="Dosubmit()" value="submit" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">

<!-- Include the plugin CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

@*<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">*@
<link href="~/Content/FroalaEditor/froala_editor.pkgd.min.css" rel="stylesheet" />
@*<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">*@
<link href="~/Content/FroalaEditor/froala_style.min.css" rel="stylesheet" />


<!-- Code Mirror JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>

<!-- Include the plugin JS file. -->
@*<script type="text/javascript" src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>*@
<script src="~/Scripts/froalaEditor/froala_editor.min.js"></script>
<script type="text/javascript" src="../js/plugins/code_view.min.js"></script>

@section scripts{
    <script>
    new FroalaEditor('div#froala-editor', {
        toolbarButtons: ['bold', 'italic', 'html']
    });
        function Dosubmit() {
            $.ajax({
                type: 'post',
                url: '@Url.Action("FroalaEditorajax", "Main")',
                dataType: 'json',
                data: { ajaxdata: $(".fr-element").html() },
                        success: function (res) {
                            console.log(res);
                        }
                    });
        }
    </script>
}

How it works:

Best Regards.

Yuki Tao