This question already has answers here:
TinyMCE and importing / copy paste from Microsoft Word
(2 answers)
Closed 9 years ago.
I am using TinyMCE only to paste from word. What I am doing actually is that I am using the paste from word button and then I am pasting inside.
I would like to enable the paste from word function automaticaly on each paste so the user do not need to click the paste from word button and then paste in the second window.
I am using the paste from word because of all the styles added when pasting from word which I don't need.
Here is an example of html text I am getting when I am using the simple paste option:
<!-- #page { margin: 0.79in } P { margin-bottom: 0.08in; direction: ltr; color: #000000; line-height: 0.24in; text-align: justify; widows: 2; orphans: 2 } P.western { font-size: 12pt; so-language: en-US } P.cjk { font-family: "Times New Roman"; font-size: 12pt; so-language: de-DE } A:link { color: #0000ff; so-language: zxx } --> Global Health Governance
And I need only Global Health Governance.
Thank you very much.
In this case you will need to implement this functionality using the tinymce configuration setting paste_preprocess. Eighter surf through the tinymce source code (probably the paste plugin under js_scripts/tiny_mce/plugins/paste/editor_plugins_src.js and put the relevant code there or you implement it as i mentioned in another stackoverflow question:
TinyMCE Paste As Plain Text
Related
I'm having an issue with the auto comments in my .scss files. By auto comments I mean 'CTRL + /' to comment out the selected code. When I'm in my scss file and I do this, it adds the JS comments '//'. So the output looks like this:
body {
font-size: 1rem;
line-height: 1.4;
// overflow-x: hidden;
}
When it should be:
body {
font-size: 1rem;
line-height: 1.4;
/* overflow-x: hidden; */
}
If I rename the .scss file to .css then the auto comments work correctly. I'm guessing this has to do with a setting inside of VSCode, either user or workspace setting?
I believe this is working as expected, as SCSS supports both ways to comment, and I do not think there are any settings in Visual Studio Code you can change to change how the comment style works.
Ctrl + / is "Toggle Line Comment", which is the // way. If you want to comment using the multi-line comment format, you can instead highlight what it is you want to comment, and perform Shift + Alt + A.
However, there is another way to change how the Line Comments work:
Find where Visual Studio Code is installed on your system, and go to resources → app → extensions → scss
In the scss folder should be a "language-configurations.json" file. Open it.
Change the lineComment property to be either a blank string, or delete it outright.
"lineComment": ""
Save the file, and restart Visual Studio Code. Now when you perform Ctrl + /, it should comment using the style you prefer.
Please see the comments to #Timothy's answer. I have previously written an extension to deal with these issues, Custom Language Properties, that allows you to easily change things like line or block comments for many languages.
But setting lineComment to the OP's desired ["/*","*/"] did not work. In looking at the scss language configuration file, an array of values is not allowed for line comment values. But it works to delete the lineComment key or setting it to the empty string "".
However, although probably rare, any language configuration file can be overwritten whenever vscode updates and you would have to go back and change the file again. Hence the extension.
With this setting:
"custom-language-properties": {
"scss.comments.lineComment": ""
}
this accomplishes the same thing as editing the underlying language-configuration file. And fortunately, at least in this case, apparently vscode will apply the blockComment value when the lineComment value is missing or inappropriate. And fortunately that blockCcomment style is what the OP wanted.
That is valid comment syntax for SCSS, and it's probably the correct default.
Single-line comments (which start with //) are always removed from the compiled output, which is usually what you want.
Multi-line comments (/* comment */) are only removed in compressed mode.
Source: Sass: Comments
My word document has some text that has a particular font applied, ex. Arial and is bolded
When I paste into TinyMCE, I get that value in a span:
<p><strong><span style="font-family: 'Arial'>Hello World</span>/strong>/</p>
How do I detect that this line of text has both Bold and Arial applied so that I can convert it to use a custom tag called BoldArial:
<p><BoldArial>Hello World</BoldArial></p>
I would like to apply styling to BoldArial in my custom stylesheet that I have included with TinyMCE upon initializing it, ex:
p.BoldArial {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
How can I use the paste plugin to convert MSWord Styles to custom CSS?
You can't do that with a simple paste.
You could code the html in Word and paste as text into the Text Tab of TinyMCE.
So in Word you would have your paragraph already coded:
<p><BoldArial>Hello World</BoldArial></p>
To add the html, you could use search/replace to get 90% of the way there.
Instructions
Cntrl+H to open 'Find and Replace
Use Wildcards
Find what:
?*^13
Replace with:
<p class = "BoldArial">^&</p>
For 'Find', set 'Font' to 'Bold'
You will need to cleanup the newline/return manually. See pic.
I'm trying to make a SASS mixin that lets me specify the mixin call and the Unicode number only. This case is for list items where the icon would show up before the item.
My SASS mixin looks like this. I added both font-family options to include everything. If this isn't a good idea, maybe I'll do an if statement or something:
=faIconBefore($unicode)
display: inline-block
content: "\$unicode"
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
This can be used in code for a download icon like this:
+faIconBefore('f019')
I've also tried using this in the content line:
content: "\#{$unicode}"
Ideally, this would just add the icon I wanted, however instead I get $unicode item.pdf in my result.
It works fine when hard code the Unicode number into the SASS file, but I can't seem to get this part to work.
UPDATE:
I tried to put together a fiddle, but it wasn't working at all with the font.
Well it looks like that just doesn't work. Maybe using the #extend command, but changing the content style in the mixin to remove the single quotes and slash ('\') and adding the slash to the Unicode number in the stylesheet seemed to fix it. Here's my new code:
// Adding a Font Awesome icon before an element, specifying the unicode number - Usage: +faIconBefore('\f019')
=faIconBefore($unicode)
display: inline-block
content: $unicode
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
And the usage:
+faIconBefore('\f019')
If anyone knows of how it could use some refinement, let me know.
Thanks
When copying text from word to the wysihtml5 editor, the text gets messed up (both in term of formatting and in terms of additional added characters). Is there an easy fix for this? The correct behavior I am looking for would be the way Stack Overflow's rich-text editor works - the text copied and pasted from word looked identical to the word document.
Thank you!
Update:
To solve the problems observed with the formatting of the pasted word text, I added the line "p": {}, in the used wysihtml5-0.30_rc2.js file. The line was added in the declaration of the defaultOptions[parserRules][tags] (see used resource).
Still, now I can see at the beginning of the pasted text a "Font Definitions" paragraph:
<!-- /* Font Definitions */ #font-face {font-family:Arial; panose-1:2 11 6 4 2 2 2 2 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} #font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; mso-hyphenate:none; font-size:11.0pt; font-family:Arial; mso-fareast-font-family:Arial; mso-bidi-font-family:Arial; color:black; mso-fareast-language:HI; mso-bidi-language:HI;} a:link, span.MsoHyperlink {mso-style-unhide:no; mso-style-parent:""; color:navy; mso-ansi-language:#00FF; mso-fareast-language:#00FF; mso-bidi-language:#00FF; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt;} #page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt
90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} -->
This only happens when I use Firefox, and does not happen in Chrome. Any ideas on how to get rid of this problem?
wysihtml5 includes a parser that analyses all text that gets pasted in its text area and applies the filter rules that are defined in the parserRules config object. Adding "style": { "remove": 1 } to your parserRules should do the trick.
To understand the Firefox problem, you have to see the raw clipboard HTML content (originating from Word) that gets pasted into the text area. Just copying some Word text and pasting it into a text editor won’t help because the text editor requests a text-only variant of the clipboard content.
If you’re on a Mac you can see this raw clipboard content with the help of the ClipboardViewer tool that you have to compile yourself with XCode. The desired HTML content should be in the public.html or Apple HTML pasteboard type fields. Maybe there exist other tools that don’t need to be compiled and/or that work on other operating systems.
Now you should see that your clipboard content from Word actually looks something like
<span>
<!--
/* Font Definitions */
...
div.WordSection1 {page:WordSection1;}
...
-->
</span>
So by removing the style tag (with all of its content) the font definition junk disappears.
Have a look at wysihtml5’s parserRule demo to see some more advanced configuration options.
I've solved this by overriding wysihtml5.dom.getPastedHtml. Just add this after you've loaded wysihtml5:
wysihtml5.dom.getPastedHtml = function(event) {
var html;
if (event.clipboardData) {
html = event.clipboardData.getData('text/plain');
}
return html;
};
When I put this in my css file:
label, input
{
font-size: 18px;
}
Text labels show up with font size 18, but text boxes aren't affected.
Also, when looking at the generated html code in the browser (Inspect element, using Chrome), I'm seeing that the input box has a set height.
So the question is, can I control the size of the text box and the size of the font inside the text box using just css?
If you add the !important declaration your css would take precedence on the smartgwt css declaration.
I've just tried and it works.
label, input {
font-size: 18px !important;
}