You are here: PSPad forum > English discussion forum > Export to clipboard as HTML Suggestion

Export to clipboard as HTML Suggestion

Goto Page: 1 2 Next

#1 Export to clipboard as HTML Suggestion

Posted by: WebUpdateWizard | Date: 2015-03-27 09:52 | IP: IP Logged

Hi,

Exporting to the clipboard as html is, of course, really useful!

However, I notice that the current implementation splits the css styles into a <style>..</style> section, followed by the html using the styles that have been created.

It strikes me that it would perhaps be more useful if the html could be exported with inline styles only, at least as an option. This would interfere less with existing styles on the target page and integrate more easily with web editors etc..

Is this possible, or could it be in the future? Thanks!

(I've just returned to PSPad after many years away. It's come on lovely!smiling smiley)

Cheers!

Pete

Options: Reply | Quote | Up ^


#2 Re: Export to clipboard as HTML Suggestion

Posted by: pspad | Date: 2015-03-27 10:15 | IP: IP Logged

Way as is it is intentional.
Mostly you have your own styles and with separate stylesyou can easily change styles to already existing ones.
Another thing. Way with CSS definition is faster and result file is smaller.

But we can wait for other users reaction.

Options: Reply | Quote | Up ^


#3 Re: Export to clipboard as HTML Suggestion

Posted by: Andreas | Date: 2015-03-27 10:59 | IP: IP Logged

Can you please give a small example of code that we can copy as HTML and then paste into a document to see what you are doing?

Options: Reply | Quote | Up ^


#4 Re: Export to clipboard as HTML Suggestion

Posted by: WebUpdateWizard | Date: 2015-03-28 16:15 | IP: IP Logged

Andreas:
Can you please give a small example of code that we can copy as HTML and then paste into a document to see what you are doing?

Hi Andreas,

Instead of this:

<head>
<style type="text/css">

.cpp1-comment { color: #008000; font-style: italic; }
.cpp1-space { color: #008080; font-style: italic; }
.cpp1-brackets { color: #000000; }
.cpp1-string { color: #800000; }
.cpp1-reservedword { font-weight: bold; }
</style>
</head>

<pre><code><span class="cpp1-comment">// Format a COLORREF as an RGB string
</span><span class="cpp1-identifier">CString</span><span class="cpp1-space"> </span><span class="cpp1-identifier">CColorCalc::FormatRGB(</span><span class="cpp1-space"> </span><span class="cpp1-identifier">COLORREF</span><span class="cpp1-space"> </span><span class="cpp1-identifier">clrRGB</span><span class="cpp1-space"> </span><span class="cpp1-brackets">)
{
</span><span class="cpp1-space"> </span><span class="cpp1-identifier">CString</span><span class="cpp1-space"> </span><span class="cpp1-identifier">strRGB;
</span><span class="cpp1-space"> </span><span class="cpp1-identifier">UINT</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nRed=GetRValue(clrRGB)
</span><span class="cpp1-space"> </span><span class="cpp1-symbol">,</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nGreen=GetGValue(clrRGB)
</span><span class="cpp1-space"> </span><span class="cpp1-symbol">,</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nBlue=GetBValue(clrRGB);
</span><span class="cpp1-space"> </span><span class="cpp1-identifier">strRGB.Format(</span><span class="cpp1-string">"%d,%d,%d"</span><span class="cpp1-symbol">,</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nRed,</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nGreen,</span><span class="cpp1-space"> </span><span class="cpp1-identifier">nBlue);
</span><span class="cpp1-space"> </span><span class="cpp1-reservedword">return</span><span class="cpp1-space"> </span><span class="cpp1-identifier">strRGB;
}
</span></code></pre>

.. I would like to use inline styles, which is this:

<pre><code><span style="color: #008000;font-style: italic;">// Format a COLORREF as an RGB string
</span><span>CString</span><span style="color: #008080;font-style: italic;"> </span><span>CColorCalc::FormatRGB(</span><span style="color: #008080;font-style: italic;"> </span><span>COLORREF</span><span style="color: #008080;font-style: italic;"> </span><span>clrRGB</span><span style="color: #008080;font-style: italic;"> </span><span style="color: #000000;">)
{
</span><span style="color: #008080;font-style: italic;"> </span><span>CString</span><span style="color: #008080;font-style: italic;"> </span><span>strRGB;
</span><span style="color: #008080;font-style: italic;"> </span><span>UINT</span><span style="color: #008080;font-style: italic;"> </span><span>nRed=GetRValue(clrRGB)
</span><span style="color: #008080;font-style: italic;"> </span><span>,</span><span style="color: #008080;font-style: italic;"> </span><span>nGreen=GetGValue(clrRGB)
</span><span style="color: #008080;font-style: italic;"> </span><span>,</span><span style="color: #008080;font-style: italic;"> </span><span>nBlue=GetBValue(clrRGB);
</span><span style="color: #008080;font-style: italic;"> </span><span>strRGB.Format(</span><span style="color: #800000;">"%d,%d,%d"</span><span>,</span><span style="color: #008080;font-style: italic;"> </span><span>nRed,</span><span style="color: #008080;font-style: italic;"> </span><span>nGreen,</span><span style="color: #008080;font-style: italic;"> </span><span>nBlue);
</span><span style="color: #008080;font-style: italic;"> </span><span style="font-weight: bold;">return</span><span style="color: #008080;font-style: italic;"> </span><span>strRGB;
}
</span></code></pre

This is easier to paste into a page (in my opinion) because all it requires is a simple paste into the target position in the html.

(I think the html for BOTH examples will probably look horrible on the forum page but if you copy/paste them into separate documents in your favourite html editor you should see they both render the same but the second example uses inline styles instead of classes and a page-based <style> tag within the <head>.)

The problem with the first html quoted,the way PSPad does it currently, is that the <head> tag is probably already in the target page anyway and the <style> tag, within the <head> tag, would need to be manually separated from the code html where you are looking to paste what PSPad exported to the clipboard into an existing (i.e. already has some content) html document.

I hope I've explained that clearly!

By the way, in attempting to convert from the exported format to the converted for this message I found templates.mailchimp.com which does most of the conversion to inline automatically. One can ignore the <head> tag in the result but I had to also manually remove the redundant 'class' identifiers in the html to get to my cleaned up version used as the second example in this message.

In any case, I really don't want to be going this route if I can help it... hence my feature request for PSPad to have the option to export with inline styles.

Regards,

Pete

Edited 1 time(s). Last edit at 2015-03-28 16:15 by WebUpdateWizard.

Options: Reply | Quote | Up ^


#5 Re: Export to clipboard as HTML Suggestion

Posted by: Andreas | Date: 2015-03-28 22:54 | IP: IP Logged

First of all using inline style always is bad pratice. Inline styles should be restricted to JS while dynamically manipulating the DOM.

Using the style tag for styles in the HEAD also is not best practice.

You should use

<link rel="stylesheet" href="style.css">

If you would have an option to switch to inline styles instead of STYLE in the HEAD and CLASS in the SPANs, where would you like to define your style rules? Consider that a rule can persist of multiple property value pairs and a rule may persist of multiple selectors.

@Jan

When I paste the code after "Export to Clipboard as HTML" there is no HEAD and STYLE tag. Am I missing something?

After pasting code starts with

<pre>
  <code>
    <span style="font: 10pt Courier New;">

You can safely remove the surrounding SPAN with the style tag as browser use monospace for PRE and CODE anyway. So you are not forcing to use this font-family and size. Also with the PRE and the CODE we have two wrappers which we can use to style the output wich is more than enough.

Is there some kind of CSS theme for the classes that PSPad generates?

Options: Reply | Quote | Up ^


#6 Re: Export to clipboard as HTML Suggestion

Posted by: pspad | Date: 2015-03-29 07:10 | IP: IP Logged

Andreas, PSPad is code editor. When you need to paste your code from clipboard? In case you want to show code as is - highlighted code.
This isn't whole web page, but you paste it into existing page or into Word or any other documentation. In this case you don't need to have HEADER, BODY e.t.c.

PSPad CSS code depends of highlighter. As you are able to set attributes in highlighter, same CSS is generated into HTML.

To be honest, this code comes from Synedit component. I modified it slightly only. But In case of need, I can make changes as is necessary.

Options: Reply | Quote | Up ^


#7 Re: Export to clipboard as HTML Suggestion

Posted by: Andreas | Date: 2015-03-29 13:54 | IP: IP Logged

Jan, maybe you misunderstood.

First I did not know that there is a function to copy HTML with the option to paste it as highlighted escaped code. But now that I know, I want to help to make it work professional.

I'm a web developer and know HTML and CSS very good, but I never needed this function, as I let my CMS generate my HTML code even presentational code gets generated by a module - see here demo.contao.org /en/text-elements.html#code

My first question was how WebUpdateWizard gets this peace of code after he pasted the code into PSPad

<style type="text/css">
  .cpp1-comment {
    color: #008000;
    font-style: italic;
  }
...
</style>

I do not get this code while pasting. Where can I find this CSS that depends on my CSS highlighter settings?

Options: Reply | Quote | Up ^


#8 Re: Export to clipboard as HTML Suggestion

Posted by: pspad | Date: 2015-03-29 14:22 | IP: IP Logged

Export whole page without selection to clipboard as HTML
In this case you will get whole page including CSS

Isn't better to use extension for Contao which will highlight code automatically for you?
Something like this:
contao.org

Edited 1 time(s). Last edit at 2015-03-29 14:34 by pspad.

Options: Reply | Quote | Up ^


#9 Re: Export to clipboard as HTML Suggestion

Posted by: Andreas | Date: 2015-03-29 15:15 | IP: IP Logged

Wow, thank you, cool function. Do not know if I need it ever, but real cool.

pspad:
...
Isn't better to use extension for Contao which will highlight code automatically for you?
Something like this:
contao.org

No, this extension is very old and probably will not work on Contao 3.4. 3.4 core has this highlighter build in github.com with this languages out of the box:

ApacheConf
AS3
Bash
C
CSharp
CSS
Delphi
Diff
Groovy
HTML
Java
JavaFx
JavaScript
Perl
PHP
PowerShell
Python
Ruby
Scala
SQL
Text
VB
XHTML
XML

Options: Reply | Quote | Up ^


#10 Re: Export to clipboard as HTML Suggestion

Posted by: WebUpdateWizard | Date: 2015-03-29 17:56 | IP: IP Logged

In reply to post #5, thanks for the lesson on css inlining. I did actually know that. However, the thing is that sometimes, as you will also know, a bit of inlining is not as sinful as you assert. So when I want to copy some source code from PSPad into a web page I'm developing the chances are that it's the only source code on that page and it's therefore easier to just use inlining.

Inlining is permitted in the html standards, so I don't think you are entitled to tell me I can't have it if I want to. grinning smiley

The downside of using classes and not inlining is that you need to put the <style> tag in the <head> tag. Therefore I can't just paste what PSPad has put into the clipboard directly where I want to in the page I'm editing. I need to put the <style> tag into the <head> tag. Which is more work.

However, I just noticed something else odd about PSPad's export to html. If I paste the exported html from PSPad back into PSPad or any other editor I don't actually get the <style> tag, although the pasted html includes the css class names. Therefore it won't render correctly.

I only get the <style> tag as well if I paste the clipboard contents into the wysiwyg option in my web editor (Microsoft Expression Web 4). Then the html renders correctly but I'd prefer the styles to be inlined (as an option), as per my original post.

I hope that makes some sense!

Pete

Edited 1 time(s). Last edit at 2015-03-29 17:56 by WebUpdateWizard.

Options: Reply | Quote | Up ^


Goto Page: 1 2 Next





Editor PSPad - freeware editor, © 2001 - 2024 Jan Fiala, Hosted by Webhosting TOJEONO.CZ, design by WebDesign PAY & SOFT, code Petr Dvořák, Privacy policy and GDPR