i'm having an issue trying to get a directive work as a value of a translation. here's what i have
scope.value = '<img class="picture portrait" ng-src="' + url + '"></img>';
scope.key = 'PICTURE';
and in my view:
<span translate="{{key}}" translate-values="{{value}}" translate-compile></span>
when i inspect the element, the ng-src attribute is not on the tag anymore
i configured it with:
$translateProvider.useSanitizeValueStrategy('sanitize');
$translateProvider.usePostCompiling(true);
i'm not sure what's going on, but i think the $sanitize service strips the ng-src from the html, i don't know how to prevent it, if you have any ideas, they will be warmly welcome
Related
I am developing a reusable HTML component following this guide.
I have tested the guide with some sample code from bootstrap and it worked properly.
Now I am trying to use it for my navbar, which uses Thymeleaf syntax and I think it is giving conflicts due to the fact that both use single quotes.
Here is what I mean:
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = ` ***a single quote to open ***
<nav>
{*Header code goes here *}
</nav>
`; *** a single quote to close
}
}
Some code from my navbar, where in the srcset and src attribute single quotes are used:
<nav class="navbar navbar-expand-lg">
<div class="container">
<span class="navbar-brand">
<a href="/" class="navbar-brand">
<img
th:attr="srcset=|
#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_256/XXX.jpg'} 256w,
#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_1280//XXX.jpg'} 1280w|"
th:src="#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}" class="img-fluid rounded-circle" width="70" alt="logo"
/>
</a>
</span>
If my intuition about the problem is correct, how can I overcome it?
===========================================================
UPDATE: I have tried isolating the problem, and found out that this line works:
th:src="#{https://theUrl}"
But this one doesn't:
th:src="#{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + '/XXX.jpg'}"
So I believe the single quotes may be indeed the problem
There are a few different things happening here - but the bottom line is: The reason it is not working as expected is because of the way the code mixes Thymeleaf variables with JavaScript code.
Simple HTML Example
Consider this very simple piece of Thymeleaf:
<div th:text="${cloudinaryBaseUrl} + 'hello'"></div>
And assume that the value we pass to the Thymeleaf renderer for cloudinaryBaseUrl is /foo/bar/baz/.
If we place this in the HTML body, then the result will be the following HTML:
<div>/foo/bar/baz/hello</div>
So far, so good.
Adding JavaScript to the Mix
But in your case, you are embedding your HTML inside a JavaScript script - it's no longer a piece of HTML that will be rendered by Thymeleaf (on the server!). Now it is a string of text that will be processed by JavaScript (in the browser!), long after Thymeleaf has finished its work.
You have this:
<script>
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div th:text="${cloudinaryBaseUrl} + 'hello'"></div>
`;
}
};
customElements.define('main-header', Header);
</script>
The text inside the backticks is a JavaScript template literal - which just happens to also use ${...} for inserting values into text - but completely unrelated to Thymeleaf's ${...} syntax.
This will fail.
JavaScript will not be able to substitute any correct value into ${cloudinaryBaseUrl}. You may get something rendered - or you may get a JS error. Depends on the specific template literal being used.
Passing Thymeleaf Variables to JavaScript
If you want to pass Thymeleaf variables to JavaScript, you can do it like this:
<script th:inline="javascript">
var baseUrl = [[${cloudinaryBaseUrl}]];
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div>${baseUrl}hello</div>
`;
}
};
customElements.define('main-header', Header);
</script>
Note the th:inline="javascript" added to the script tag, and the use of [[...]].
By the time it reaches the browser, Thymeleaf has updated the JavaScript code to be this:
var baseUrl = '/foo/bar/baz/';
...
So, now the JS will generate this HTML:
<main-header>
<div>/foo/bar/baz/hello</div>
</main-header>
A Better Way - Use Thymeleaf Fragments
If you are doing this as an exercise, then this is how you can combine your JavaScript template fragments with Thymeleaf variables.
But Thymeleaf has support for fragments built into the Thymeleaf language. So, there is no real need for any of that JavaScript.
Take a look here: Template Layouts.
This does exactly the same thing as your JavaScript approach - but with full Thymeleaf support and no need to pass variables to JavaScript.
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
How do you add the title attribute to the DNN:Label control and have it render as a title attribute, <label title="myTitle">, in html?
Here is my code:
<div class="dnnFormItem">
<dnn:label id="lblDateNeeded" runat="server" controlname="DateNeeded" resourcekey="DateNeeded" />
<dnn:dnndatepicker runat="server" cssclass="dnnFormInput" id="DateNeeded" skin="Office2010Silver">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2010Silver"></Calendar>
<DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" LabelWidth="40%"></DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
</dnn:dnndatepicker>
</div>
this.Page.Title = "My Custom Title";
However, in DotNetNuke this will only work in the Page_PreRender method (verified in DotNetNuke 6.2.3).
If you want to set it earlier, you must still use this method which boils down to this:
((DotNetNuke.Framework.CDefault)this.Page).Title = "My Custom Title";
The above will work in Page_Load, Page_Init and Page_PreRender.
If you want to modularize it more, you can add the following in your base class for your modules (a good idea to always do this):
public DotNetNuke.Framework.CDefault BasePage {
get { return (DotNetNuke.Framework.CDefault)this.Page; }
}
And then simply use:
this.BasePage.Title = "My Custom Title";
The great thing about this method is that you can use it for the meta description and keywords as well.
this.BasePage.Description = "My Custom Description";
this.BasePage.Keywords = "My Custom Keywords";
Source
The title attribute is not accessible in the DNN label. As the OP noted, if specified as an attribute in the front end code, it will be ignored in the output HTML. Furthermore, if added in the code behind using YOURLABEL.Attributes.Add(), it will also be ignored.
Since it is not possible using the properties of the DNN label, another option is needed. One option is to address the issue with JQuery.
The HTML output by the DNN label looks like this:
<div class="dnnLabel">
<label>
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
The following JQuery will set the title attribute of the label based on the text in the SPAN:
$('label').each(function () {
$(this).attr('title', $(this).text().trim());
})
Running this produced the following changes to the HTML:
<div class="dnnLabel">
<label title="Test Label">
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
This function runs over all labels on the page. The JQuery selector could be modified to identify the labels you need to modify, if it's not everything on the page.
This may not produce the exact output you are looking for but you have plenty of flexibility with the JQuery function. If you need to set a special value for the label and you know what the text is going to be, you could use an if or switch to identify the specific label and process it accordingly.
I Have a two anchor tag for look like below
<a href="www.exx.com" target="_blank">
AnnualBudget</a>
When i click the above Anchor tag ,Its not gone correct URL(For it's gone to Mydomainname/www.exx.com). But the same time below anchor tag is working and go to correct url .
<a href="https://www.exx.com" target="_blank">
AnnualBudget</a>
Why www is not worked but https is worked ? And How can i solve this issue ?
Update :
The url is entered from user in textbox .So how can i check it ?
Try putting a "http://" in front.
I.e.
AnnualBudget
"www" is not a protocol/scheme. HTTPS or HTTP are protocols.
Absolute URLs have to have a "scheme" in front, see details about URLs on Wikipedia.
Alternatively, this would also work:
AnnualBudget
Update 1:
Since you comment that your input comes from the user, let me add this one:
(Although this refers to SQL injection, the same would be true for all user input).
Update 2:
To check the input for an absolute URL, do something like:
// Read from user input, e.g. (WebForms syntax!):
string my = MyTextBox.Text.Trim();
// Do some checking (this has be done much more thoroughly in real-life!)
if ( !my.StartsWith("http://") && !my.StartsWith("https://") )
{
my = "http://" + my;
}
// Do something with "my", e.g. (again, WebForms syntax only):
MyHyperLink.NavigateUrl = my;
(Please note that I'm no MVC expert, the above pseudo-code uses WebForms syntax instead)
Is there a possibility to turn off the automatic enclosing of all written content within <p></p> in CKEditor 3.x?
I tried
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
but this just changes the inline linebreaks to <br /> while leaving the enclosing paragraph.
Currently writing "Test" produces this output
<p>
Test</p>
but I want it to be simply
Test
Is there a configuration property for this or would another inline editor to be better suited for this?
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; - this works perfectly for me.
Have you tried clearing your browser cache - this is an issue sometimes.
You can also check it out with the jQuery adapter:
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#your_textarea').ckeditor({
toolbar: 'Full',
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P
});
});
</script>
UPDATE according to #Tomkay's comment:
Since version 3.6 of CKEditor you can configure if you want inline content to be automatically wrapped with tags like <p></p>. This is the correct setting:
CKEDITOR.config.autoParagraph = false;
Source:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
Across the internet, people have noticed that setting config.enterMode to CKEDITOR.ENTER_BR removes the wrapping paragraph tags from CKEditor. It's worth noting that the setting changes the behavior of the enter key to insert line breaks rather than paragraphs, which is not desirable.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode "It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness."
However, the setting that is designed to remove that initial paragraph, config.autoParagraph, isn't advisable either, as it introduces "unpredictable usability issues" because the editor really wants a top-level block element.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
The magic happens on wysiwygarea/plugin.js, line 410, where the editor selects the default block element based on config.enterMode. A config option to change the default block element would allow us to start with a div, but we'd continue getting more divs with every enter press, unless we changed the paragraph format via the menu.
See: http://docs.cksource.com/ckeditor_api/symbols/src/plugins_wysiwygarea_plugin.js.html
It would be possible to remove the wrapping paragraph tag with post-processing (either on the server or in CKEditor's getData event), but that leads us into the same problem as disabling autoParagraph: there's no top-level block.
I would rather say that there's not a good solution, but rather a handful of half-solutions, than to accept changing config.enterMode as the canonical solution.
Try this in config.js
CKEDITOR.editorConfig = function( config )
{
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
};
Found it!
ckeditor.js line #91 ... search for
B.config.enterMode==3?'div':'p'
change to
B.config.enterMode==3?'div':'' (NO P!)
Dump your cache and BAM!
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR; // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
I'm doing something I'm not proud of as workaround. In my Python servlet that actually saves to the database, I do:
if description.startswith('<p>') and description.endswith('</p>'):
description = description[3:-4]
Edit the source (or turn off rich text) and replace the p tag with a div. Then style the div any which way you want.
ckEditor won't add any wrapper element on the next submit as you've got the div in there.
(This solved my issue, I'm using Drupal and need small snippets of html which the editor always added the extra, but the rest of the time I want the wrapping p tag).
if (substr_count($this->content,'<p>') == 1)
{
$this->content = preg_replace('/<\/?p>/i', '', $this->content);
}
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
Set such config:
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR
CKEDITOR.config.forcePasteAsPlainText = true
Well, with me in laravel, with using ckeditor, it work using simple strip_tags($var) function for output like below:
Sending value to like this to the other page: {!! strip_tags($six_answer) !!}
And/Or when outputting use the same code: {!! strip_tags($six_answer) !!}.
the result is below without any <p> tags.
In VS2015, this worked to turn the Enter key into <br>
myCKEControl.EnterMode = CKEditor.NET.EnterMode.BR
Personally, I don't care if my resulting text only has <br> and not <p>. It renders perfectly fine and it looks the way I want it to. In the end, it works.