I'm currently trying to figure out how to make a page break set of html convert into a read more link.
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
I've seen something similar in WordPress that makes the content past the line break not appear on the page. Does anyone know how to do this ?
If you're using a WYSIWYG editor such as tinyMCE, you can use the horizontal line as a separator for example.
Then, using php, you do an explode using the html code of your separator and you display only the first value of your array as an introduction text.
That's how i do it, there might be better ways.
Related
This question is probably really stupid but i really searched a lot for it, but I may be using the wrong keywords.
I have a String with <hr> and I want Angular to display a horizontal line.
The HTML is converted to <hr> and therefore displayed as text <hr> on the page.
How can I achieve this that the HTML tags are not converted by angular?
I have done this in Angular 6 with TS and there it was no problem, is there a pipe or something else, which I have to use?
Binding to [innerHtml] should do that.
<div [innerHtml]="fieldInComponentClassWithHtml"
You need to use SafeInnerHtmlDirective
https://pub.dev/documentation/angular/latest/angular.security/SafeInnerHtmlDirective-class.html
I have a string like this:
Plain text with newlines.
But it also has some html.
<ul>
<li>first</li>
<li>second</li>
</ul>
I'd like the lineabreaks filter to output an HTML like this:
<p>Plain text with newlines.<br/>
But it also has some html.</p>
<ul>
<li>first</li>
<li>second</li>
</ul>
But what I get is:
<p>Plain text with newlines.<br/>
But it also has some html.</p>
<ul><br />
<li>first</li><br />
<li>second</li><br />
</ul>
Any idea to prevent HTML parts to be line-breaked, but still allow the filter to do its job on plain text parts?
EDIT - #Shang Wang: The real-world usage for this filter is a backend for writers who are familiar with HTML and prefer not to use a rich text editor, but would still like to avoid typing "<br />" or "<p>" everytime they need to go to a newline.
Basically, what I'm trying to do is to emulate Drupal's "Filtered HTML" input filter, which is meant for editors who need a way to quickly write simple articles without using a WYSIWYG editor, but with the possibility to add more advanced HTML tags (like , , etc..) here and there.
Hope this helps to understand my goal, and sorry for my english.
EDIT 2 - #karison: I don't have a particular approach, yet. My current code is:
{{ myText | bleach | linebreaks }}
I'd like to avoid to write from scratch a custom filter just for this, so I don't have any code to show. As it's something that I've seen in Drupal and other CMS, I was hoping that there was some way to do it with the current linebreaks filter.
No I don't think it's possible and it doesn't make much sense. You could have new lines in your html section as well:
<p>This is a
multiple line text.
</p>
but they won't be shown as multiple lines when the browser is rendering them. Then what is the template filter suppose to do? I think the best option for you is to separate the text yourself in your views.
Edit:
First off I'm not aware of any such django template filter exists because your situation is too specific to make it a public template filter, also the requirement is complex and require a parser to distinguish between html and plain text.
Secondly, multi-line text is not rendered by inserting <br/> for each new line(w3school's doc). Instead you use the tag <pre></pre> to wrap your paragraph. In theory, for each block of plain text you could wrap <pre> around it, then the new lines will be shown "as is".
I have a DIV HTML element that displays some HTML from a variable:
<div contenteditable="true"
ng-bind-html="renderHtml(currentOperation.description)"
ng-model='currentOperation.description'></div>
It renders just fine.
When I type text into the DIV the changes are NOT reflected in the scope variable currentOperation.description
I need a 2 way street here, as is the case with all Angular variables using ng-model
I think you need 2 different things in your case. I would have one to write the content as text, and one to display it. Then either you have the 2 of them like a preview mode, or you use a 3rd variable to know if you are in edit mode or not.
For example:
<textarea model="description" ng-show="edit"></textarea>
<div ng-bind-html="description" ng-show="!edit"></div>
But the best would be to use a WYSIWYG tool I guess. Most of them allow you to write your own HTML. I use this one https://github.com/fraywing/textAngular
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>