Is there an easy way to keep empty <p> visible in wysiwyg when using TextAngular?
If the string is <h1>test</h1><p></p><p></p><h2>subtitle</h2>, when the page render and the content is passed to TextAngular, the HTML source code has all tags, but the wysiwyg doesn't show them.
Did I miss something?
Thanks
Edit: here is a fiddle to demonstrate
It's not an elegant solution, but you can parse your html string and add to your empty tags.
this.html = "<h1>Test</h1><p> </p><p> </p><h2>Test</h2>";
Related
AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
{{checking}}
Result in HTML page in browser:
<div>check</div>
Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.
So the result in html page should be:
check
and the above should come in red color
Any way to do it? hopefully its simple... AngularJS experts please help!
i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?
Use ng-bind-html!
Here is the docs-page for ng-bind-html. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
I have an element with ng-html-bind that loads HTML content:
<p ng-bind-html="content.body"></p>
Inside this content I have one or more <code> blocks.
I would like to apply syntax highlighting only to the code tags of the loaded content, for example using angular-highlightjs directive.
Any idea on how to achieve this?
There are many ways to bind html on the page with Angular. One way is with ng-bind-html, but it's not really the best for this use case, since you also need angular-highlightjs directive to compile. You can achieve your goal with $compile like this:
/** Here, you will need to do some transformations to your html string
* 1. Add `hljs` attribute or `class="hljs"` to the `<code>` tag in any `<pre><code>`
* 2. Hopefully you already have your line breaks in place. This will result in
* a single line code block otherwise. See my plunk for how I added '\n'
*/
var myHTML = $scope.content.body;
element.append( $compile( myHTML )($scope) );
See my plunk
From the linky docs it seems it should work with ng-bind-html. However, if the text contains html tags, then linky overrides the actual html interpretation to transform URLs into links.
This can be seen by for instance writing
Pretty text with some links:<br/><img src="http://something.com/lol.gif">
http://angularjs.org/,
mailto:us#somewhere.org,
another#somewhere.org,
and one more: ftp://127.0.0.1/.
in the example at the bottom of the linky docs page.
Is there a way to firstly sanitise and interpret html using ng-bind-html and only later parse the resulting text to add clickable links?
When I am going to bind data in angularjs variable like..
$scope.msg = '<div class="success_msg">Message</div>';
<span ng-bind="msg"></span>
but its show with div tab also. I dont want to show html elements. I want to show only Message in this span.
What is the solution?
When you need to bind html fragments, you have to use mg-bind-html.
You can find the documentation here: https://code.angularjs.org/1.2.16/docs/api/ng/directive/ngBindHtml
(don't forget to add ngSanitize to your module dependencies)
I'm using the CKEditor plugin of Grails and while I can store the HTML content from CKEditor to the database, I can not render it properly in the view.
What I'm getting in the view is the HTML escaped and not as mark-up content.
<p> sdfsdfsadf</p> <p> asdfasdfasdf</p> <p> asdfasdfasdf</p> <p> ¥</p>
When I want:
sdfsdfsadf
asdfasdfasdf
asdfasdfasdf
¥
How do I get the stored data to render properly?
Migrated to Grails 2.4 and after some head scratching, found <%=expression%> is deprecated.
Using the new syntax ${raw(expression)} solved my issue.
try ${instance?.attribute?.decodeHTML()}
From John Flinchbaugh's Answer on this question about codecs and encodings:
To disable HTML encoding for one expression in a page that is
otherwise defaulting to HTML, use <%=expression%> notation instead
of ${...}.