I would like to extract the HTML content created inside a tinyMCE editor to display it without any tinyMCE editor (displaying directly on a page).
I'm aware of tinyMCE's getcontent() function. But is there another function/parameter/plugin that I oversee with which you can extract it as selfrunning HTML code? There are many tinyMCE classes inside the content and it would be hard work to gather them or to convert them back into CSS styles.
So either an extraction with the tinyMCE specific classes would be great or any (automated) conversion from classes to CSS styles would be great. Or ist there any other way I oversee?
There is a format option that can be used to get pure HTML out of tinyMCE content:
tinymce.get('yourEditorId').getContent( {format : 'html'} );
Related
I want to achieve multiple editors on a single page. Like two editors in a single page. Do not want to use plugins; pure native coding.
CKEditor supports multiple inline as well as classic (contents in iframe) editors on a single page.
In both cases it is enough to specify path to ckeditor.js script on header page and CKEditor code will automatically:
change all div elements with contenteditable attribute to inline editors
"change" all textarea elements with class ckeditor to classic editors
Please also have a look at below samples and documentation links to get a better idea of how you can use multiple CKEditor instances on a single page:
http://nightly.ckeditor.com/17-11-11-07-04/full/samples/old/replacebyclass.html
http://nightly.ckeditor.com/17-11-11-07-04/full/samples/old/inlineall.html
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_framed
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_inline
EDIT:
Additionally you can use the replaceAll method which replaces all textarea elements which match your criteria. This method requires writing JS on HTML page.
Don't need to use a plugin.
TinyMce support multi-editor in one single page.
See documentation :
https://www.tinymce.com/docs/get-started/multiple-editors/
I'm trying to do a simple wysiwyg editor and I am trying to edit this page.
I inserted that code into my editor and included the original css file from the website, yet it seems like ckeditor is putting its own tags around the overall content which breaks the original design. Is there a simple way to overcome this?
Thanks
Inline editing is what you want to do there. Simply render the website (component) in your admin panel, using your default, frontend styles and create inline editors for all editable fields. Finally serialize contents of editors.
CKEditor uses CSS from ckeditor/contents.css - you have to add your CSS there.
Your file is visible at http://makehugeprofit.com/editor/ckeditor/contents.css?t=E0LB and as you can see, it doesn't contain much. How did do "included the original css file from the website"? Merge it with contents.css and you'll have greater luck.
The editable area is an iframe and thus not in the same CSS space as your surrounding site.
Problem: When a user copies a load of code from another website and pastes it into CKEditor it includes a load of inline styles which refer to the style of the content on the website it was copied from. When the pasted content is then saved and shown on my website it doesn't use my styles but the copied inline ones which conflict.
I've had a look through the CKEditor documentation, and to be honest I don't find the documentation to narrow down to what I'm looking for. There is a paste function available which removes formatting but this is an optional button in the menu, whereas most users will just post into the main large area, so its pretty worthless.
Main Question: is there a way to set CKEditor to strip formatting when pasting?
Ah, I found the answer:
// Apply editor instance settings.
CKEDITOR.config.forcePasteAsPlainText = true;
I am programming some plugins that insert elements like pictures and tables inside the editor. What I need is to see these elements in the editor rendered with their final aspect. I mean, I need to add css classes to the editor and use them to render text in the editor, and I want to do it on the fly, seing those elements rendered in the editor.
Is there any way to do it? Can I see the elementes correctly rendered inside the editor inserting them with a plugin?
Thank you!
Yes you can.
You will have a dropdown list in your editor, where you can select configured CSS styles to be applied in your content.
How to do it you can find in the documentation:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.