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;
Related
I'm trying to put these pictures in a single row using semantic view in drupal7. I just created this view named try and put 2 pictures in it.
After that, I'm editing this view->format-format->setting->row (this is asking for class attribute, not mandatory) and I don't know what to write in this class attribute.
How do I put these pictures in a single row?
Make custom template for that view. Open "Advanced settings" on right side of view editing page and at bottom find "Theming information". There you can see template file suggestions. There if you can see the code of default templates (and copy it to clip board) but you can also see naming suggestions for overriding default templates. So copy code from default template, make from it file with some suggested name, save file in your theme...and clear the cache.
Then change the file as you wish, depending on your needs....
The CSS 'display:inline-block' is a good way to make rows. CSS Flexbox is more difficult to understand, but very powerful. Occasionally, the CSS 'float:left' will do what you need, but it has a tendency to 'log jamb' on differing element heights.
I have used Semantic Views to create continuous, wrap-around content from multiple View rows. I removed the View row element by deleting the default 'div' in the 'Format settings'. That way only a continuous stream of fields appears within the '.view-content' tag.
A custom template is also good.
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.
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
My question is simple, do I need to rename vector.js file when I create a skin based on Vector? Let me explain more on how I created my custom skin...
I have created a custom skin for my Mediawiki and its based on Vector. My skin works almost exactly like Vector but with css tweaks and with changes to the html template elements inside the skin template which is basically moving around the elements and displaying a bit different that the way it is done in Vector. I read the following tutorials when creating my template:
https://www.mediawiki.org/wiki/Manual:Skinning/Tutorial
http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/
These are the things I did when creating the custom skin:
I copied and pasted the Vector folder and then renamed it to 'myskin'.
I then created the 3 files, skins/myskin/myskin.php, skins/myskin/MySkin.skin.php and skins/myskin/MySkin.i18n.php like its mentioned in the tutorial link above.
I then renamed the key, identifier and name of my skin from vector to MySkin or myskin like its mentioned here:
"When building a skin you'll be working with your skin name in three
forms, a lower-cased key, a camel cased identifier, and a localized
skin name. For our skin the key would typically be 'myskin', the
identifier 'MySkin', and the localized name 'My Skin'.
I edited the screen.css and tweaked it to the style I want.
I then edited the skin template. Here instead of using "class SkinMySkin extends SkinVector", I copied the "class MySkinTemplate extends BaseTemplate" section from Vector and re-arranged the templates and tweaked it to create my skin.
After doing all of the above, everything works. However, I noticed that when I copied all the files from Vector to MySkin, there is this "vector.js" file in it too. I dont know if I need to rename this js file to myskin.js or do I leave it like this. Currently I did not rename this javascript file and everything seems to be working fine anyways. So I am not sure what this file does. I read the tutorials and also searched MediaWiki and it doesnt mention anywhere if I need to rename this file to myskin if I am creating a skin based on Vector. I also dont see a link or reference to this file inside my skins/myskin/myskin.php, skins/myskin/MySkin.skin.php and skins/myskin/MySkin.i18n.php files. Can someone please clarify this for me?
I have also created a custom skin with the manual like the OP. I didn't rename vector.js and everything seem to work fine for me.
You could simply rename or move vector.js and check if you notice any missing functions or weird behaviour in either the following functions
Collapsible tabs
Focus search input at the very end
animate drop down menu in and out
or
Always collapse if the "More" button is already shown
Since this is more or less all the .js seems to do + providing some fallbacks.
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.