I'm trying to add a custom style in the style menu.
style_formats : [
{title:'Estilos'},
{title : 'Bold text', inline : 'b'},
{title : 'Blue text', inline : 'span', styles : {color : '#006'}},
{title : 'Blue header', block : 'h1', styles : {color : '#006'}},
/*this one*/ {title : 'Codigo fuente', inline : 'code', classes : 'prettyprint', exact: true}
],
Basically i want selected text to turn in:
<code class="prettyprint">
codeline1
codeline2
codeline3
</code>
But i get:
<code class="prettyprint"> codeline1</code>
<code class="prettyprint"> codeline2</code>
<code class="prettyprint"> codeline3 </code>
How can i make to all selection to be inserted in same <code></code> ??
tried also: {title : 'Codigo fuente', block : 'code', classes : 'prettyprint', exact: true}
And i get same result but just with no blank spaces or \n
If you want to see why i'm asking this
Thanks!
I've been working on this on and off for a few days and still cannot get a fully working solution. I think it's close but I just don't have any more time to spend on it. It also seems to be rather hacky, so I have to ask if there is not just a more simple way to do this, that is, does it really need TinyMCE? Might be easier to just use a <textarea> and prettify.
I also used a bit of advice from this other question: Remove styles when pasting from Word or other source
The idea I was experimenting with was to manipulate the TinyMCE content if the code was "prettified" so that editing occurs on the raw text rather than the prettified version. So I have hooked into the TinyMCE onchange and onKeyDown callbacks to switch the content back to an unpretty version. The only problem is that the first keypress will not register as it is swallowed by the act of replacing the content. There is a way to Programmatically sending keys to input field? but it is not supported in Webkit!
Also, there seems to be some bugs, as it still adds multiples <code> elements if code is typed directly into the TinyMCE. However, pasting code and then editing seems to work OK.
So if you type code and then apply the "Source Code" style. all the carriage returns are removed (probably same issue as #András identified).
So here is my partial solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
pre {
width:500px;
}
code {
white-space:pre;
line-height:1;
margin:0;
padding:0;
}
#pretty {
display:block;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<link type="text/css" rel="stylesheet" href="prettify/prettify.css" />
<script type="text/javascript" src="prettify/prettify.js"></script> <!-- from http://code.google.com/p/google-code-prettify/ -->
<script type="text/javascript">
var plainContent = null;
function applyPrettyPrint(inst) {
if (tinyMCE.activeEditor.isDirty()) {
var content = tinyMCE.activeEditor.getContent({format : 'raw'});
if (content.indexOf('prettyprint') > 0) {
$('#pretty').html(content);
prettyPrint();
tinyMCE.activeEditor.setContent($('#pretty').html(), {format : 'raw'});
} else {
plainContent = content;
}
}
}
tinyMCE.init({
// General options
mode:'textareas',
theme:'advanced',
forced_root_block:false,
force_br_newlines:true,
force_p_newlines:false,
content_css:'prettify/prettify.css',
// http://tinymce.moxiecode.com/wiki.php/Plugin:paste
plugins:'paste',
onchange_callback:'applyPrettyPrint',
setup:function(ed) {
ed.onKeyDown.add(function(ed, e) {
if (ed.getContent().indexOf('prettyprint') > 0) {
ed.setContent(plainContent, {format : 'raw'});
}
});
},
style_formats:[
{title : 'Source Code', block : 'code', classes : 'prettyprint', exact: true}
]
});
</script>
</head>
<body>
<form method="post" action="somepage">
<div><textarea name="content" cols="50" rows="15"></textarea></div>
</form>
<p id="pretty" ></p>
<p>Plain code to copy inside textarea</p>
<pre>
class Foo {
private int bar = 0;
public doSomething() {
return bar;
}
}
class Foo { private int bar = 0; public doSomething() { return bar; } }
</pre>
</body>
</html>
Note: You will need to download TinyMCE and prettify and make sure the paths to the .js and .css resources are correct for this to work.
Hope it helps!
Well I only have a partial answer, but it still might help you a bit. From what I gather, you'd like to be able to type or paste some code into the tinyMCE text area (and not the raw html code of the editor field), and then apply some styles to that block afterwards, so it will be prettified.
(As a sidenote, I think anyone who qualifies adding a code block to a richt text editor field, should be able to press the "raw html" button, paste his code, and wrap it into a <pre> or <code> tag. Especially if you add a bit of instruction on what to do, just above or below the editor area. And then you'd be home free. And everyone does it this way.)
Nonetheless, going back to the original problem. If you enter lines of codes into the tinyMCE textarea, upon each enter pressed you'll get your line wrapped into a <p> tag.
So if you type:
if (this_is_the_best_line_ever == true) { ... }
and press enter, you'll get
<p>if (this_is_the_best_line_ever == true) { ... }</p>
So, using your example, you would never actually see this
<code class="prettyprint">
codeline1
codeline2
codeline3
</code>
but rather this
<code class="prettyprint">
<p>codeline1</p>
<p>codeline2</p>
<p>codeline3</p>
</code>
The problem with the latter, that it is not valid HTML, never was, never will be, and tinyMCE rightfully will not produce that code. Reason being <pre> and <code> are inline elements, and <p> being block level element, hence <pre> and <code> can not contain any <p>s.
We're getting to the answer (even if it's only half an answer), so don't give up.
Best approach would be to use <div> wrappers around your code block. This is legal, tinyMCE will happily do it for you, see below (note the wrapper attribute!):
style_formats : [
{title : 'Codigo fuente', block : 'div', classes : 'prettyprint', wrapper: 1}
]
We could start celebrating right now, but your chosen plugin, the code prettifier, only processes <pre> and <code> tags from your html, so unfortunately these <div> wrapped code blocks would not be pretty, oh so pretty...
You could a) hack into the prettify plugin and force it to swallow div tags having certain classes or b) force tinyMCE to forget about these <p> wrappers.
For now, going with the second option, you can initialize tinyMCE with the following parameters:
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false
and with that you'll have your lines separated with <br> tags instead of wrapped in <p> tags. This is highly discouraged by the authors of tinyMCE for various reasons (refer to the FAQ), but it is still a valid option.
Now you can trick tinyMCE to wrap the whole content into a <code> block, with the following configuration (which is a bit of hack in itself, but works, ahemm mostly):
style_formats : [
{title : 'Codigo fuente', block : 'code', classes : 'prettyprint', wrapper: 1}
]
Your only problem that applying this style will strip the existing <br> tags from within your text selection. That's right, you'll have all your selected code compressed into one line. And I tried many ways to keep these tiny little miserable <br> tags, but could not pursuade tinyMCE to do so. This is where I gave up, hence the "half answer". Good luck!
Related
I am generating a PDF using nodejs with pdf-creator-node and I got success.
My requirement is I need to generate a PDF with Height X Width = 926px X 1296px.
I don' know what css I should write to generate this dimension pdf.
right now if I set div or body height and widht with above mentioned dimension I am getting 3 pages
this is what I tried
#page {
width: 1296px;
height: 926px;
}
<div
class="parent-div"
style="
width: 1296px;
height: 926px;
background-color: #faf0e6;
border: 1px solid red;
"
></div>
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to https://github.com/MrRio/jsPDF and download the latest
Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
**For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:**
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
#ignoreElement': function (element, renderer) {
return true;
},
#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit too unrestrictive for the most use cases though:
We support special element handlers. Register them with a jQuery-style ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) There is no support for any other type of selectors (class, of the compound) at this time.
One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3, etc., which was enough for my purposes. Additionally, it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
I am using This tutorial as a reference, and I am trying to use the below piece of code in my project :
let _setPlaceholderText = ( string = "Click or Drag a File Here to Upload" ) => {
template.find( ".alert span" ).innerText = string;
};
It works fine with the tutorial code when I download it and tested it, but when I copy pasted exact the same code to my project it didn't work.
If I am not mistaken the problem has to do with this line of code :
template.find( ".alert span" ).innerText = string;
can anyone explain for me what is ".alert span"? the tutorial says that the above line attempts to find the .alert span element only. Unfortunately, it wasn't enough for me to understand how to get it to work in my project.
Any help please
It looks like you're looking at the inner text for a piece of CSS intended to modify the style of span elements contained within anything that has the class name alert.
It might looks like this:
<style type="text/css">
.alert span {
color: #ff0000;
}
</style>
For modifying something like this:
<div class="alert">
<span>There was an error!</span>
</div>
I'm using Redactor v9.2.1. I'm trying to allow my customers to use style tags in their CMS, but redactor strips them from the content.
When I add the following:
<style type="text/css">
.red{color:red;}
</style>
redactor strips it to:
<p>
.red{color:red;}
</p>
I've made sure that deniedTags is not including 'style' in my settings object and I'm not using the allowedTags attribute since it conflicts with deniedTags.
Here is my settings object that I'm passing to the redactor init:
var settings = {
deniedTags:[
'html', 'head','link', 'body', 'meta', 'applet'
],
observeLinks: true,
iframe: true,
convertVideoLinks: true
};
Any help is appreciated.
http://imperavi.com/redactor/docs/settings/clean/#setting-deniedTags
Top-level HTML tags ('html', 'head', 'link', 'body', 'meta', 'style',
'script', 'applet') will always be removed regardless of this setting,
unless wrapped in 'pre' tag (formatting option 'Code')
Edit
So you can't add a style tag inside the editor, as I read in the docs. Seems like you have these options:
Style individual tags outside the editor: You add the parent selector .redactor-editor and then the tag name. See http://imperavi.com/redactor/examples/typography/
Add several formattingAdd options to let users pick up custom styles from the formatting dropdown:
$('#redactor').redactor({
formattingAdd: [
{
tag: 'p',
title: 'Red Block',
class: 'red-style'
}
]
});
/**
* The above would create a new formatting entry,
* which you define with 2 css selectors:
* one for the class of the entry, another for the dropdown entry
*
* .red-style, .redactor-dropdown .redactor-formatting-red-style {
* color: red;
* }
*/
Notice css selector rule for the dropdown, which is .redactor-dropdown .redactor-formatting-YOUR_CSS_CLASSNAME. This also is important:
formattingAdd can only be applied to p, pre, blockquote and header
tags.
So you can't apply it to <div>. If you need block element, use <p>. Also, if you need inline, you CAN use <span>... it works, see fiddle: http://jsfiddle.net/a4df10vj/1/
writing an app for opensocial brings up the following problem:
I create a dialog box (css is tundra)
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px"
});
How can I change the properties "overflow" and /or "height" of the
"dijitDialogPaneContent"
contained in myDialog after creating this object?
Thank you
Subin
There are several approaches you can use, depending on how generic the solution should be.
Apply to all dialogs
If you want to apply the same style to all dialogs, you can "extend" a theme, for example, normally you would use the tundra theme like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
</head>
<body class="tundra">
<!-- Your content comes here -->
</body>
</html>
If you're going to apply it to all dialogs, you could do the following:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
<link rel="stylesheet" href="custom/style.css" />
</head>
<body class="tundra custom">
<!-- Your content comes here -->
</body>
</html>
And then write a custom stylesheet like this:
.custom .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
This will guarantee that it will override the general Tundra style for all dialogs. If you don't use a class like .custom, you cannot override the Tundra stylesheet because .tundra .dijitDialogPaneContent will be more specific (which means it has a higher priority).
Of course, you could write .tundra .dijitDialogPaneContent in your custom stylesheet as well.
Apply to a single dialog through stylesheet
If you want to apply it to a single dialog, then give an ID to the dialog, for example:
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px",
id: "myDialogId"
});
Then you could write a stylesheet like this:
#myDialogId .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
Apply to a single dialog (using JavaScript)
Seperate stylesheets may improve readability because you seperate logic from design. If you don't need the seperate stylesheet you could do something like this:
require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
// Your code
query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});
This will use the domNode property of the dialog to query the content pane and then apply the style.
Apply to multiple dialogs
If you want to apply the same style to multiple dialogs (but not all dialogs), then your best approach would be to create a custom dialog by extending the default dialog. Considering the length of my answer atm I'm not going to explain that into detail, but I recommend reading guides about writing your own widget.
is there a way to print css styles, that are inline?
I use this code to print part of the code:
w=window.open();
w.document.write($('#printable').html());
w.print();
w.close();
I could use external file and make it media=print, but part of the html are chars, that are generated by php and I could make it by making class for every posible outcome, but that would be pain.
Any ideas? Thanks.
See the Demo: http://jsfiddle.net/rathoreahsan/x69UY/
What do you think if you do like this:
<div id="printableDiv">
<style type="text/css">
#media print {
#printable {
color: red;
// Any Other style you want to add
}
}
</style>
<div id="printable">
This Text will print in red color.
</div>
</div>
Javascript/jQuery code:
w=window.open();
w.document.write($('#printableDiv').html());
w.print();
w.close();
In this scenario while a popup opens and gets the HTML of printableDiv, the styles for printer will be included in that popup so the printer will read styles from popup and will print in that manner.
I had the same problem, because i use instyle style to dynamically change background-color, and then the color was not in the print.
styleSheets[3] is my print.css file.
This worked for me:
I uncluded it in the smarty foreach i use to give some elements a background color.
<script type='text/javascript'>
document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>