I'm using the latest version of TinyMce,
And when I copy paste some html content from wikipedia, it actually inserts lots of which are not present in the source.
Example, I select the following string from wikipedia:
trained professionals and paraprofessionals coming
From this page: http://en.wikipedia.org/wiki/Health_care
And It has the following source code:
trained professionals and paraprofessionals coming
Note: As we see there are no noob-spaces ( ).
Then when I paste it to the tinymce it produces the following html:
<h3 style="background-image: none; margin: 0px 0px 0.3em; overflow: hidden; padding-top: 0.5em; padding-bottom: 0.17em; border-bottom-style: none; font-size: 17px; font-family: sans-serif; line-height: 19.200000762939453px;"><span style="font-size: 13px; font-weight: normal;">trained </span><a style="text-decoration: none; color: #0b0080; background-image: none; font-size: 13px; font-weight: normal;" title="Professional" href="http://en.wikipedia.org/wiki/Professional">professionals</a><span style="font-size: 13px; font-weight: normal;"> and </span><a style="text-decoration: none; color: #0b0080; background-image: none; font-size: 13px; font-weight: normal;" title="Paraprofessional" href="http://en.wikipedia.org/wiki/Paraprofessional">paraprofessionals</a><span style="font-size: 13px; font-weight: normal;"> coming</span></h3>
Or, as a plain text it would look like this:
trained professionals and paraprofessionals coming together
Which actually breaks my layout because it all goes in one line (as one word).
Any ideas why it does it and how to prevent it?
Whenever you copy some content from websites, it copies the style of the text also. So all you need to do is you should paste the copied content into notepad first, then from there you can again copy the same content and then paste in tinymce.
(Notepad gives you the plain content without any inline style)
First Copy the content in any place ex (Wikipedia, google, etc). Past the all content in Notepad file. The total back links and spaces are deleted after copy the notepad content past the Tiny MCE Editor. It is the better way to use this type.
When copying content from a web page, use View Source in a browser and copy the relevant part from the source and then insert it in “raw mode” (source mode, HTML mode, whatever it is called—I presume TinyMce has got such a mode; if not, get a better tool). To make this easier, in Firefox, you can paint an area and then right-click and select the option of viewing the source of the selection. (Well this might need an add-on like DOM Inspector, I’m not sure.)
It’s possible that TinyMce converts spaces to something else even in “raw” mode. I have seen such things happen in a CMS (spuriously changing normal spaces to no-break spaces), with no explanation found, and I hope I won’t need to use such a CMS ever again.
Related
I am currently working on a Kendo UI donut chart in an Angular project.
The chart works great functionally, but the styling of the chart is giving me some trouble.
Right now, the chart keeps switching between two kinds of styles.
This is the first one:
Preferred styling
This is the second one:
Non-preferred styling
These seem to change at random whenever I reload, even when nothing in the code is changed.
I have been trying to find a solution for hours, but can't seem to get anything working.
Here is the code for the chart:
<div *ngIf="isDonutEnabled && pieGraphData">
<kendo-chart class="travelbehaviour-graph-donut-spacing">
<kendo-chart-legend [visible]='false' position="bottom" orientation="horizontal"></kendo-chart-legend>
<ng-template kendoChartDonutCenterTemplate>
<span class="travelbehaviour-graph-donut-center-subtext">CO₂ Uitstoot</span>
<span class="travelbehaviour-graph-donut-center-bigtext">{{pieGraphData.co2}}</span>
<span class="travelbehaviour-graph-donut-center-subtext">g/km</span>
</ng-template>
<kendo-chart-series>
<kendo-chart-series-item *ngIf="includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionIncluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
<kendo-chart-series-item *ngIf="!includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionExcluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
Here is the relevant CSS:
.travelbehaviour-graph-donut-spacing {
height: 50vh;
width: 50vw;
margin: 0 auto;
}
.travelbehaviour-graph-donut-center-bigtext {
font-family: PublicaSansMedium;
font-size: 50px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
.travelbehaviour-graph-donut-center-subtext {
font-family: PublicaSansMedium;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
I have already tried using ViewEncapsulation.None, which didn't work. I also tried changing the CSS of the graph, but that didn't work either.
The *ngIf variables are a boolean and a data object used to load data into the graph.
So far I have found very little concerning this problem and was wondering if anyone could help me out with this problem - it would be very much appreciated!
EDIT: It's worth noting that this also happens to another chart in my project on the same page: a stacked column chart. This has exactly the same problem as described above.
I'm closing this question since I found a solution for my problem. Apparently, the glass-look is a styling feature that can be turned on or off, with other settings included as well.
More can be found here: https://www.telerik.com/kendo-angular-ui/components/charts/api/Overlay/
This had to be set for every relevant series-item in order to work.
The problem looks like it is random, but it isn't.
I assume you use Google Chrome, because we faced the problem as well.
The problem is that the chart is rendered before your css file is loaded.
This happens in Chrome because js files are cached in memory and css files are cached on disk.
Our current workaround is to to render the chart after all data is loaded (needs mostly longer than 1 second to load the data from the server).
This is probably not a satisfying solution, but I hope you were able to understand the problem a bit better.
We have also opened a Kendo ticket, and I will let you know as soon as we find a better solution.
EDIT:
Kendo support replied that they were not aware of this problem, but they are currently implementing a solution. For the fonts, they recommend that the font should be set via the font property of the the labels of the proper Chart element. They also opened a feature request so set the font globally.
I overview the html with css in chrome, it looks normal as follows:
html:
while pdf looked dislike the same as follows:
pdf:
pdf2:
As you see in pdf2, the font is not bold, but outlined with black color。And my code snippet here:
.title{
font-size: 2em;
color: #4d82bf;
font-weight: bold;
padding-left: 20px;
}
<p class="title">报告书总览 Summary Overview</p>
Does anybody know how to make the html and pdf displayed the same with bold font?
TIP:
without the font-weight font-weight: bold;style, they look the same:
html:
pdf:
After searching a few hours, I found this question Can't change bold text color, a 'black border' remains
which answered by #Bruno Lowagie, the creator of iText. According to the accepted answer, a couterpart bold font(.ttf) file is needed. After adding 'msyhbd.ttf' to the ItextRender, my program worked well! Thanks to #Bruno Lowagie
, and hope this post would help anybody! Results as follows:
I'm sending HTML mail built with Freemarker from my webapp. In the email, there is a button inside a <form> tag as follows (fake URL):
<form action="http://192.168.123.456:23080/path/">
<button style="border: 0; background-color: #003399; padding: 20px 40px; font-size: 18px; color: #FFFFFF; font-style: initial; cursor: pointer">ACCESS</button>
</form>
The form works on Google Chrome, even GMail on Chrome as well, but it does not work inside Outlook or from IExplorer (tested in IE11). When you click on the button nothing happens.
Are there any security constraints about it?
Plenty of email clients do not support forms in HTML formatted email.
It isn't clear if the restriction is for security reasons or other reasons (or if it varies from client to client).
Either way, the restriction does exist. You should generally just include a link in the email that points to a regular HTTPS hosted page containing a form.
I have an ASPX web application for my business back-office staff. In one of the back-office modules, I'm using TinyMCE to edit some text before it is saved to a database. The text looks like this:
<p data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">
<strong>Is</strong>
one of the
<span style="text-decoration: underline;" data-mce-style="text-decoration: underline;">most</span>
brilliant
<span style="background-color: rgb(255, 204, 153);" data-mce-style="background-color: #ffcc99;">ballets</span>
in the
<strong>world</strong>
. "
<em>Sleeping Beauty</em>
" take
<span style="color: rgb(51, 153, 102);" data-mce-style="color: #339966;">us</span>
to an
unchanted
place
</p>
<ul>
<li data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">with forests,</li>
<li data-mce-style="-webkit-margin-before: 0px; -webkit-margin-after: 0px; font-family: 'Segoe UI'; font-size: 14px; background-color: #f7f7f7;">curses and faries,</li>
</ul>
<p style="text-align: justify;" data-mce-style="text-align: justify;">
with a romantic and lovely
<span style="color: rgb(0, 0, 255);" data-mce-style="color: #0000ff;">song</span>
. A fantastic
<sup>show</sup>.
</p>
A mobile front-end application (developed in Flash by another person) needs to display the text with all styling intact. However, sometimes the application doesn't show anything, and the developer says that this is because Flash doesn't like HTML tags/styles.
I was thinking that we could use a parser of some kind to convert the HTML code into something more suitable for Flash, but I couldn't find anything. I came across these two links, but I don't know anything about ActionScript, so they don't help me much:
AS3 TextField and StyleSheet
StyleSheet AS3
Is there any simple way to convert HTML into ActionScript?
There's no "simple way" unfortunately.
As you've already discovered, the TextField class does support basic HTML and CSS rendering via htmlText and styleSheet properties, but the supported tags and styles are very limited. In some cases you can convert tags (using RegExp or simple string searching) to get close to the original styles.
Additionally, things like data-mce-style is specific to MCE, so you'll have to convert it to something meaningful in HTML.
If you are using AIR you can use HTMLLoader or StageWebView. Both of these classes use a full HTML rendering engine (WebKit or the native web renderer).
Finally, and this may be your best option, in a web browser you can overlay a <div> over the SWF (with wmode=opaque or transparent) and display the HTML in the browser.
I have html page with full of link. but they inside the pre tag like below
<pre class="alt2" dir="ltr" style="
margin: 0px;
padding: 6px;
border: 1px inset;
width: 640px;
height: 130px;
text-align: left;
overflow: auto">
http://test.com/files/tivist.r00
http://test.com/files/tivist.r01
http://test.com/files/fdfd.rar
http://test.com/files/gfgf.rar.html
http://test.com/files/trtr.zip
</pre>
</div><br />
The page is full of links like those
Is there any way get only those links form whole page.
I am using notepad++ . If i can get regex which can just extract those links
you can use the following regex to find them all in the document.
http://[^\s]*
I guess you could edit it to or something similiar
http://[^\s"><]*
Besure you set the line by line option off. Notepad++ has a very limited and poorly documented regex engine. Try downloading editpad pro trial edition.
(?<=\<pre.+?)http:\/\/.+?($|\s)(?=.+?\<\/pre\>)
This should only get links that are within a pre tag.
Here is a screen shot from Edit Pad Pro Trial edition