I have an admin panel -developed by me- (where tinymce and textarea are placed) and the frontend (where I output the text saved in the database submited with tinymce).
The problem is with the frontend font style (size, align, family, style) doesn't work. I viewed the output source file and I saw undefined CSS Rules, like: <span class='italic'>MY TEXT</span> or <p class='textleft'>MY TEXT 2</p>.
Am I need to include in the header tinymce CSS files? Or, am I need to write it my self ( .italic { font-style:italic !important; } )?
Use the content_css configuration setting of tinymce to include custom css styles into your editor instance.
Related
I am trying to display an HTML string with inline CSS in flutter using the Flutter_Html package. But It is not styling my text according to my inline CSS, It just showing depending on the tags.
Here is my code
Html(
data: """<p>Hello <span style="color: #fbeeb8; background-color: #e03e2d;">World</span></p>""",
)
There are some other packages. You can try those.
simple_html_css
flutter_widget_from_html
Inline styles are not released yet for flutter_html, but will be soon (as discussed on this issue), but you may use master branch override if you already want to use it.
I'm using the mark tag to highlight text in dynamically created HTML. I want to use one of two styles depending on a condition.
I am able to specify a CSS class this way:
<mark class='selected'>
But if I change this to use ng-class (without even adding my condition yet)...
<mark ng-class='selected'>
... the highlighting defaults back to the mark tag's default style and does not use my 'selected' class.
Are <mark> and ng-class incompatible?
Edit: Here's the code which hopefully will help clarify the issue.
In my MVC controller I query the database and receive text. I replace certain characters in the text with the mark tags to highlight the items the database has identified need to be highlighted, e.g.
fieldText = fieldText.Replace("\u0002","<mark>");
fieldText = fieldText.Replace("\u0003","</mark>");
This becomes part of the model passed to the template, which uses ng-bind-html to tie it to a span:
<span ng-class="{'selectedField': field.ID.startsWith($ctrl.fieldId) || $ctrl.fieldId == 'Type' + $ctrl.row.TxType}" id="field.ID" ng-click="$ctrl.elementClicked(field.ID)" ng-bind-html="$ctrl.format(field)"></span>
My CSS defines the style for <mark>:
mark {
background-color: yellow;
color: black;
padding: 0px;
text-decoration:underline;
font-weight: bold;
}
This works as far as it goes. But when the condition specified in the <span> tag shown above is true, I need to change the style of the <mark> text (and not to the same style as the rest of the span). So I'm trying to define the text in the MVC code to set the style conditionally:
fieldText = fieldText.Replace("\u0002","<mark ng-class=\"{'markSelected': $ctrl.isSelected(field.ID, $ctrl.fieldId)}\">");
But when I do this, the marked text reverts to the default <mark> system highlighting, ignoring both my mark style and my markSelected style.
ng-class is a directive that expects an expression. If you wanted to always use the same class you could do something like
<mark ng-class="value = 'selected'">
We are using TinyMCE as our text editor for the Wordpress portion of our site.
Our problem is that TinyMCE does not wrap our copy in tags by default, but instead it uses <span>.
This is not cool, because the person who updates our posts has to literally go into the html editor instead of the visual editor and manually add <p> tags. This is the only way she can guarantee that our post is not one big long paragraph. This person does not know anything about code, so this is a hardship for her.
I need to make TinyMCE react so that when she types a paragraph, and hits enter/return, it breaks to a new paragraph and wraps proper <p></p> tags around the text.
I tried to switch to CKEditor, but I was not able to embed YouTube videos or images with it.
This is a major part of our blog, so I'm forced for now to stick with TinyMCE.
here's an example of what is generated for us:
<span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 19.5px;">
... sample text ...
</span>
I need this block of copy to look like this:
<p>
... sample text ...
</p>
This is strange because normally Tinymce would break it into paragraphs. You do not need to add <p> tags in Wordpress html as this is done automatically even though it does not show inside the editor. Could it be a plugin conflict? --- Try disabling all plugins except TinyMce and then try typing a paragraph, and hit enter, to see if it breaks to a new paragraph and wraps. Does the paragraph break when you press enter with TinyMce disabled (so you know for sure its TinyMce causing the issue )? Then try again with all plugins disabled to make sure its not a theme issue. and if that all fails it may be a theme conflict with the plugin, are you using a pre-made theme or did you create it?
You should check if the following tinymce parameter is set correctly (forced_root_block):
forced_root_block : 'p',
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.
Is there a way to set the color of single words (or characters) in sphinx? I'm pretty sure there should be some markup tag, like HTML's font tag.
On my Sphinx-powered website, I use a combination of:
A restructuredText file containing roles definitions, one for each color - see .special.rst (BitBucket link)
A CSS file containing color rules for each role - see the first lines of hacks.css (BitBucket link)
Then, in every rST file where I need colors, I first import .special.rst at the top, either manually:
.. include:: .special.rst
Or with the rst_epilog configuration variable in Sphinx's conf.py file:
rst_epilog = "\n.. include:: .special.rst\n"
And then each role can be used easily in pure rST syntax:
This is :red:`red !` And :blue:`this part is blue`.
More details are given on this page (in French, sorry).
It works perfectly well for html output (and html-like), but not for PDF. Refer to the first answer above for producing a PDF with colors.
If you want to do this without being tied to html, try applying a different style than normal body text to your word.
In this example adapted from the rst2pdf manual, I apply the existing rubric style which is red in the backend that I am using:
Before red.
.. role:: rubric
I like color :rubric:`rubric`.
After red.
The actual look of the word will depend on how the style you choose is defined in the stylesheet that you use when generating your document.
If you want blue text, make a blue text style and derive it from the normal text style.
The stylsheet is backend-specific and you may be using the default.
To print the default for rst2pdf.py, do this (from the rst2pdf manual):
rst2pdf --print-stylesheet
Continuing the example for a rst2pdf stylesheet, add this to your stylesheet to have a blue text style:
bluetext:
parent: bodytext
textColor: blue
In the document you can reference this style to get a blue word.
Note this bit is generic, and should make blue text if you define a blue style in your html or whatever backend's stylesheet.
Before blue.
.. role:: bluetext
I like color :bluetext:`blue`.
After blue.
The generated pdf has the coloured words:
Sphinx already supports colors with the s5defs.txt standard definition file intended for inclusion (but is missing the CSS file):
Create/append this text to the value of rst_epilog
sphinx configuration, in your docs/conf.py file:
rst_prolog = """
.. include:: <s5defs.txt>
"""
Follow Sphinx's instructions to add a css with the colors
(e.g. adopt the hack.css from #Næreen's answer):
Place your css file into e.g. _static/css/s4defs-roles.css;
append it's path into shtml_css_files sphinx configuration:
html_css_files = ['css/s4defs-roles.css']
You may then use:
Some :red:`colored text` at last!
TIP:
Read this SO if you also want the styling to appear in Latex output.
This works, but leaves the HTML in a separate paragraph.
.. raw:: html
<font color="blue">Blue word,</font>
And a word without color
If anyone has a better answer, I will accept it.
Just a quick note because I landed here looking for something similar for html.
This works on Sphinx v2.0.1 for me. This uses the concept reported by #adam-matan but doesn't cause any formatting issues (i.e. the paragraph problem).
reference: reStructuredText Directives
.. role:: raw-html(raw)
:format: html
:raw-html:`<font color="blue">Blue word,</font>` And a word without color