I am using Tiny MCE editor version : 3.5.7
I am using multiple instances of text editor on same page with unique IDs and I have wrapped these editors in a div to show and hide these editors. Everything was working fine. Now I want to clear the contents of the editor when user hide it (so that when it is displayed again the previous contents are removed). I tried to do it using tinyMCE.get('editorId').setContent(''), it works fine only once.... I mean once I have used the above function than I am unable to set or even get the contents of that editor instance. The structure that I have used is as follows:
<div id="parentDIV">
<div id="1_editor">
</div>
</div>
tinyMCE.init({
mode: "exact",
max_char: "2000",
elements: "1_editor",
// Setting up ToolBar
theme: "advanced",
theme_advanced_layout_manager: "SimpleLayout",
theme_advanced_buttons1: "bold,italic,underline, strikethrough, separator,justifyleft, justifycenter,justifyright, justifyfull, separator,bullist,numlist,separator,fontselect ,fontsizeselect",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
});
To show and hide the editor I doing something like this:
$('#parentDIV').hide();
$('#parentDIV').show();
Can anyone help please?
I am not totally sure why this happens. One option is if an editor gets moved around the dom. For you it might be a better way to shut down your editors explicitly then to just hide them.
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'editor_id');
Related
I designed my resume with bootstrap and material design lite, now I want to convert the html page to pdf file.
I tried some libraries (jsPdf) and some tools (html2pdf, princexml), it produces the pdf file but the problem is, that pdf is not what it looks in the html page.
There is no styles, the output i am getting is similar to pressing ctrl+p` in browser.
My question is,
Is there any tools or libraries for my problem ?
or
Is there any options in above mentioned tools that i can use?
pdf outputs
Try this converter WKHTMLTOPDF on your back-end. It outputs exactly what your see in you browser. It supports html, css and even js. Wkhtmltopdf based on webkit.
Using runtime it can be used like that
wkhtmltopdf http://google.com google.pdf
In your case, it seems that wkhtmltopdf can not load css. Check right css include path. Do not use relative path.
Your problem is the Bootstrap library, not any plugins or PDF tools you are using. It removes most styles when you "print" a web page, including print to PDF. My company, the DocRaptor HTML to PDF service, has a great blog post with a list of suggested fixes for getting Bootstrap styles to print correctly, but they could be summarized as:
Print using screen CSS mode/rules, not print. Otherwise, you have to a lot of overrides for Bootstrap to get it to work right. Much easier to just make the renderer use screen mode.
Bootstrap will think most PDFs are an extra small device, like a cell phone, so you have to either adjust your breakpoints or your in-code column definitions.
If your last column drops to a new row, this is because Bootstrap defines the width for many columns as XX.66666667%. The PDF engine adds all these up, and because of the 7 at the end, it is technically greater than 100%. Since the row width is over 100%, it bumps the last column to a new row. the fix is to override Bootstrap's column widths (handy Gist file for that).
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 to unrestrictive for the most usecases though:
We support special element handlers. Register them with 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
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. Additionalyl 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 Impervi Redactor as a editor on my website where i set some html generated using xml and xslt. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a ...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the , so when I hit source again it has been changed to...
<div>some content</div>
Try to set allowedAttr like:
$('#redactor').redactor({
allowedAttr: [
['div', 'class'],
]});
even you can allow several attributes like:
['img', ['src', 'alt']]
You can also find list of all available settings for Impervi Redactor
I've looked through several questions in this forum and the CKEditor site about this topic, but nothing's helped so far. First of all, I'm running CKEditor 4.3.2 on a SharePoint 2010 site, using inline editors within a jQuery UI modal dialog. Adding CKEditor to the dialog was painless, but I can't say the same for setting up a slimmer toolbar. Here's what I've done so far:
slimConfig.js
CKEDITOR.editorConfig = function(config) {
config.toolbar = [
{name: "basicstyles", items: ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]},
{name: "paragraph", items: ["NumberedList", "BulletedList"]}
];
}
Source JavaScript
setToolbar("notes");
setToolbar("access");
//. . .[several other fields]. . .
function setToolbar(divName) {
CKEDITOR.replace(divName, {customConfig: "/customConfigs/slimConfig.js"});
}
Additionally, I've set up the target fields as divs using contenteditable set to true, like this:
<div id="notes" contenteditable="true"></div>
The script seems to run well until it hits an exception on ckeditor.js line 308, where the error text is "The editor instance is already attached to the provided element." After a few more steps, it returns to the same area on line 308, at which point I get a terminal exception with the message, "Exception thrown and not caught."
I believe I have everything set up properly right now, but don't know what to make of this error. Does anyone have experience with getting customized toolbars set up?
By default CKEditor replaces all elements of contenteditable="true" with inline editors. So when you try to replace it once again, it will throw an error because it doesn't make sense.
If you want to take a full control over your editors, set CKEDITOR.disableAutoInline to false and take care of all instances manually. Of course, you can always find your instance in CKEDITOR.instances object and call editor.destroy() if you want to.
See http://docs.ckeditor.com/#!/guide/dev_inline
I tried TinyMCE (documentation) and CKEditor and they both require this kind of code for initialization:
tinyMCE.init({
selector: '.some-div-with-text-inside',
inline: true,
fixed_toolbar_container: '.toolbar',
valid_elements: '*[*]',
setup: function(editor) {
// something that happens on setup
}
});
So, basically some selector is required and all DIVs with .some-div-with-text-inside class will become TinyMCE's editable areas. The editor will appear in .toolbar container.
==========================
What I would ideally like to achieve is an editor that is not attached to any DIV or TEXTAREA and whose functions (like "bold text", "create a link") would work on any content editable area in the document as long as there is some selection made. With Rangy exactly this is possible. See demo: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html
In TinyMCE v3 something like this was available:
$(function(){
tinyMCE.init({ mode: "none", theme: "simple" });
tinymce.execCommand("mceAddControl", false, "myEditableDIV");
});
But mode: "none" no longer exists in v4 and the second line became tinyMCE.execCommand("mceAddEditor", false, "myEditableDIV"); now but when there are multiple editable DIVs added this way then editor appears multiple times inside .toolbar. I'm wondering if there's any way to prevent that?
I just need 1 editor for all current and future DIVs with contenteditable. Some DIVs may be added or removed from the document. I went through every option in their documentation and I couldn't make it work.
I think that you can't edit DIV or Textarea without attaching tinyMCE, but here is one trick that you can make - you can HIDE the editor toolbars and show them only when you focus the current DIV or textarea. To achieve this you can use this function:
editor.on('focus', function(e) {
and here show the toolbars
});
It has been hours already trying to find out if jQuery (or any javascript) can actually work inside the TinyMCE editor as it's the most powerful and customizable utility in its class. Search by search i understood what's the deal with .tinymce({ cleanup: false, extended_valid_elements: 'script[type|src]' });
but instead of CDATA sections around the code i now get and still no success.
Is that possible or it's a restriction in order to prevent conflicts with TinyMCE interface.
Use this modal code to access element inside tinymce using jquery
tinymce.activeEditor.$("#element_id").attr({'alt' : alternate , 'align' : align , 'title' : title});