I'm using editorJS with Strapi (back) and NextJS (front).
Acutally, I sanitize the data directly in the frontend with a custom parser.
It's working fine, but I've got an issue when I paste content from Word, it adds a span with some style tag.
This is the part when I transform the data from editorJS to a paragraph block
paragraph: function (e) {
return "<p>" + e.data.text + "</p>";
},
//e.data.text = <span style="font-size:11pt;font-family:Arial;>Example</span>
I want to get rid of all the style. What's the best method ?
Should I sanitize the HTML in the strapi or keep it like this in the front app ?
Related
I have an application that uses Sammy for some simple client-side routing.
One of the pages has a "Download Pdf" button, which needs to do a POST to get and download a pdf document (not very resty, I know, but it has to be a POST due to the large amount of data I'm submitting). It does this using the old trick of dynamically creating, populating, and submitting a <form> element.
Everything works fine, except for I can see in the console an error from sammy that my route was not found. Note that this is not a route, or even a verb that Sammy should be handling.
Here is my reduced test case
Sammy(function initializeClientRouting(app) {
app.get('#/', show('#default'));
app.get('#/test', show('#test'));
function show(selector) { return function() {
$('section').slideUp();
$(selector).slideDown();
}; }
}).run('#/');
$('button').click(function() {
var form = $("<form method=post action: 'http://www.google.com'>").hide();
$('<textarea name=q>').text("search text").appendTo(form);
form.appendTo('body').submit().remove();
});
Does anyone know how to prevent this error? Is this a bug in Sammy?
It's a combination of sammy & JQuery behaviour (bug?). When generated dynamically the way you put it, the form tag is being rendered as
<form www.google.com'="" 'http:="" action:="" method="post">
This will try to POST to the current page which probably is something like
http://blah/# or http://blah/#/test
For some reason, Sammy will be triggered because of the hashtag, not finding a POST configured and log an error.
Fiddling with your example, what worked for me was:
var form = $("<form>");
form.attr('method', 'post');
form.attr('action', 'http://www.google.com');
$('<textarea name=q>').text("search text").appendTo(form);
form.appendTo('body').submit().remove();
This seemed to generate the proper HTML and remove the Sammy error.
I want to create a simple form in Drupal7 with only one field. When hitting the submit button I need to call an ajax function with the field value and update a DIV on the page without reload.
I'm not familiar with Drupal form API, and I tried to implement the examples form the form api documentation but I always get errors like this:
Notice: Undefined index: #title_display form_pre_render_conditional_form_element() függvényben (/var/www/nmtest/includes/form.inc 2986 sor).
Notice: Undefined index: #value theme_textarea() függvényben /var/www/nmtest/includes/form.inc 3727 sor).
I can do it by creating a custom page and simply use native PHP but this is not an "elegant" way.
I want something similar like the one here, but without form valitation, page reload or so: Create a VERY simple form in Drupal
I only want one button that calls an ajax function. Shoud I do this with forms API or just use plain old native PHP and jQuery?
Edit: Looks like I don't even need a real ajax call, because I only need to change an SRC of an IMG tag.
Here's what I did in native PHP. I want to achive this trough forms api:
<script>
function getstar() {
starpoints = jQuery('#starpoints').val();
rand = Math.floor(Math.random() * 9999) + 1;
src = "test.php?star=" + starpoints + '&rand=' + rand;
jQuery('#starimg').attr("src",src);
return false;
}
</script>
<form>
<input type="text" name="starpoints" id="starpoints" />
<input type="submit" onclick="return getstar();" />
</form>
<img src="/test.php?star=5" id="starimg" />
Edit: Ok, I managed to render a form with the Drupal API. Now the only thing is that I want to insert the placeholder for the IMG via my module, but I don't know how to do it. The form renders fine, but I want to add a HTML block after it. Currently I do it by javascript:
jQuery(document).ready(function() {
jQuery('<div><br /><img id="starimg" src="" /></div>').insertAfter('#drawstar-form');
});
What hook should I catch to render this HTML block after the form? I tried drupal_get_form but that returns an array and I cannot attach the HTML block.
The Form API provides everything that you need to do this without writing a single line of JavaScript code. See http://drupal.org/node/752056 and http://api.drupal.org/api/examples/ajax_example!ajax_example.module/function/ajax_example_simplest/7 and .
My issue is for some strange reason it seems stuck in the page controller so instead of getting out and going into the ajax controller I have it trying to go down that route in the page controller
1st try
http://localhost:2185/Alpha/Ajax/GetBlah_Name/?lname=Ge&fname=He
2nd try
http://localhost:2185/Patient/~/Ajax/GetBlah_Name/?lname=Ge&fname=He
Objective
http://localhost:2185/Ajax/GetBlah_Name/?lname=Ge&fname=He
Page button to call jquery
<a style="margin-left: 310px;" href="javascript:void(0)" onclick="getBlah()"
class="button"><span>Lookup</span></a>
Jquery code
1st try
{
$.getJSON(callbackURL + 'Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}
2nd try
{
$.getJSON(callbackURL + '~/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
}
In summary I don't know why it won't break out of the controller and go into the Ajax controller like it has done so in all the other projects I've done this in using the 1st try solution.
It seems you want to cal a controller at ~/Ajax. Is it? If yes, you should use this code:
$.getJSON(callbackURL + '/Ajax/GetBlah_Name/?lname=' + $('#Surname').val() + '&fname=' + $('#FirstName').val(), null, GetResults)
UPDATE:
This will work for your Q, but the complete solution is #Darin Dimitrov's answer. I suggest you to use that also.
UPDATE2
~ is a special character that just ASP.NET works with it! So http doesn't understand it. and if you start your url with a word -such as Ajax-, the url will be referenced from where are you now (my english is not good and I can't explain good, see example plz). For example, you are here:
http://localhost:2222/SomeController/SomeAction
when you create a link in this page, with this href:
href="Ajax/SomeAction"
that will be rendered as
http://localhost:2222/SomeController/Ajax/SomeAction
But, when url starts with /, you are referring it to root of site:
href="/Ajax/SomeAction"
will be:
http://localhost:2222/Ajax/SomeAction
Regards
There are a couple of issues with your AJAX call:
You are hardcoding routes
You are not encoding query string parameters
Here's how I would recommend you to improve your code:
// Always use url helpers when dealing with urls in an ASP.NET MVC application
var url = '#Url.Action("GetBlah_Name", "Ajax")';
// Always make sure that your values are properly encoded by using the data hash.
var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };
$.getJSON(url, data, GetResults);
Or even better. Replace your hardcoded anchor with one which will already contain the lookup url in its href property (which would of course be generated by an url helper):
<a id="lookup" href="Url.Action("GetBlah_Name", "Ajax")" class="button">
<span>Lookup</span>
</a>
and then in a separate javascript file unobtrusively AJAXify it:
$(function() {
$('#lookup').click(function() {
var data = { lname: $('#Surname').val(), fname: $('#FirstName').val() };
$.getJSON(this.href, data, GetResults);
return false;
});
});
Now how your urls will look like will totally depend on how you setup your routes in the Application_Start method. Your views and javascripts are now totally agnostic and if you decide to change your route patterns you won't need to touch jaavscript or views.
Given the following Html.ActionLink:
#Html.ActionLink(Model.dsResults.Tables[0].Rows[i]["title"].ToString(), "ItemLinkClick",
new { itemListID = #Model.dsResults.Tables[0].Rows[i]["ItemListID"], itemPosNum = i+1 }, ...
Data from the model contains HTML in the title field. However, I am unable to display the HTML encoded values. ie. underlined text shows up with the <u>....</u> around it.
I've tried Html.Raw in the text part of the ActionLink, but no go.
Any suggestions?
If you still want to use a helper to create an action link with raw HTML for the link text then I don't believe you can use Html.ActionLink. However, the answer to this stackoverflow question describes creating a helper which does this.
I would write the link HTML manually though and use the Url.Action helper which creates the URL which Html.ActionLink would have created:
<a href="#Url.Action("ItemLinkClick", new { itemListID = #Model.dsResults.Tables[0].Rows[i]["ItemListID"], itemPosNum = i+1 })">
#Html.Raw(Model.dsResults.Tables[0].Rows[i]["title"].ToString())
</a>
MVCHtmlString.Create should do the trick.
Using the actionlink below you do not need to pass html in the model. Let the css class or inline style determine how the href is decorated.
#Html.ActionLink(Model.dsResults.Tables[0].Rows[i]["title"], "ItemLinkClick", "Controller", new { #class = "underline", style="text-decoration: underline" }, null)
those are the cases that you should take the other path
#{
string title = Model.dsResults.Tables[0].Rows[i]["title"].ToString(),
aHref = String.Format("/ItemLinkClick/itemListID={0}&itemPosNum={1}...",
Model.dsResults.Tables[0].Rows[i]["ItemListID"],
i+1);
}
#Html.Raw(title)
Remember that Razor helpers, help you, but you can still do things in the HTML way.
You could also use this:
<a class='btn btn-link'
href='/Mycontroler/MyAction/" + item.ID + "'
data-ajax='true'
data-ajax-method='Get'
data-ajax-mode='InsertionMode.Replace'
data-ajax-update='#Mymodal'>My Comments</a>
Here's my problem...
I have a page that initially renders and displays an AJAX form created using Ajax.BeginForm. Some criteria is entered and the AJAX form is posted. A partial view is returned which contains an HTML form created using Html.BeginForm.
So far so good... Everything to this point works fine. My unobtrusive client validation works great on the elements created from the partial view. My problem happens when I now try to create some dynamic input elements (via jQuery) and insert/append them into the form created by the partial view. I cannot get any unobtrusive client validation to occur on my dynamically created elements.
I have tried:
- cloning existing elements, modifying their ids/names and appending them in the DOM.
- creating html strings and inserting them in the DOM.
After each insert of the dynamic element I have tried calling:
- $.validator.unobtrusive.parseElement() [new element]
- $.validator.unobtrusive.parse() [new container, document, etc]
- $.validator.unobtrusive.parseDynamicContent() [plug-in]
Here are the jQuery code details...
$("#insert").live("click", function () {
var html = "<input type='text' value='' name='CustomerNominationVolume' id='CustomerNominationVolume' data-val-required='The Nomination (Dth) field is required.' data-val-number='The field Nomination (Dth) must be a number.' data-val='true' /><br />"
html += "<span class='field-validation-valid' data-valmsg-replace='true' data-valmsg-for='CustomerNominationVolume'></span>";
$("#new").html(html);
});
$("#parse").live("click", function () {
$.validator.unobtrusive.parse(document);
});
$("#validate").live("click", function () {
var element = $("#CustomerNominationVolume");
var form = $(element).first().closest('form');
form.validate().element(element);
});
Any help would be GREATLY appreciated!
EDIT:
After doing some additional research and testing I went back to this solution to determine why it wasn't working for me. As it turns out I was inserting new input elements that were part of a list. Therefore, the name of my new elements would look similar to this: something[0].id, something[1].id, etc...
These names caused the $.validator.unobtrusive.parseDynamicContent() function to fail on this line:
$('[name=' + elname + ']').rules("add", args);
I simply changed this to
$("[name='" + elname + "']").rules("add", args);
Everything is now working fine...
Once you've added your dynamic content, then call:
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
Where "$('form')" is a selector for your form.
That should do the trick.