How to add a CSS from style sheet in jquery
it doesn't matter where you define the css: you can define them directly in your html document (not nice style), put them into one or several external css-files or create them via JS (not nice style, too). After that, you can use the addClass method
$("p").addClass("myClass yourClass");
All css methods of jQuery can be found here
Related
I'm using CKEditor 5 on my website in order to allow users to generate PDF templates for their company.
My issues is, that once I take the data out of the ckEditor, every styled element has a class="CSS-Class-Here", which is problematic due to the fact that when I convert the HTML contents of the CKEditor to PDF, the PDF doesnt know any of these classes.
Is there any way to get CKEditor to save these classes as inline styles?
I know that its possible to create a plugin for a specific element for a specific style, but I want everything to act this way, not something specific.
Also, It's impossible to just inject the styles into the PDF itself, due to the fact that ckEditor keeps their styles in javascript functions and creates them on demand.
For example:
Yellow highlighted text comes out as:
<mark class="" marker-yellow "">Random Text</mark>
I would like it to come out as:
<mark style="background: yellow">Random Text</mark>
Meaning that the style that's present in the marker-yellow class should be applied inline directly to the element itself.
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.
We have additional placeholders, which are embeded in conent edited by CKEditor and we need to be possible to place such placeholders before and after TR-tag, so we could organize repeating of data in the table. But CKEditor probably find that is not valid HTML and take out repeater placeholders before the table.
For example I write next html in source mode:
<table><tbody>{start}<tr><td>...</td></tr>{end}</tbody></table>
I switch to html mode and back to source, now my html is treated to the next view:
<p>{start}{end}</p> <table><tbody><tr><td>...</td></tr></tbody></table>
Possibly there is a CKEditor switch to turn off all syntax cleanup or specially for tables?
Try Adding this line to Config.js file:
config.allowedContent = true;
CKEditor is not a source code editor, but a WYSIWYG editor which uses browsers' contenteditable implementations for its editing feature. Therefore, it needs to work on valid and real HTML.
Although, check the config.protectedSource setting. You'll be able to hide those {start|end} tags from parser.
while creating a article I want to show some HTML code as part of content, but after saving that article that particular snippet of HTML code get executed.
I am using joomla 1.5 | code citation extension for insert code in article. Is there any solution?
You should turn off HTML stripping, or include it as a Custom HTML Module, and writing the position in the article with load position. to load the custom HTML you've put in the Module. i.e.
{loadposition YourModulePosition}
Will load anything you place within a Custom HTML Module.
The correct way should be to paste the code into the wysiwyg (design view, not raw code view) - as long as you have a decent editor the angle brackets should be converted to html entities and it should just work.
The built-in Geshi plugin - though a little dated - is usually all that is needed to make add colored highlighting. The plugin is a little dated but after inserting your code all you need to do to make it work is add:
<pre class="html"> ... </pre>
around your html. Chenge HTML to js, css, etc depending upon the code to be shown.
How can i change the look of the jqgrid without changeing the stylesheet. Basically im using jqueryui to style my site but i want to use different background images for just the grid. Is this possible?
Is it that you want to apply several jQueryUI themes to the same page, and have jqgrid use one of them while having other elements in your page use the other?
You may want to look at this page which discusses how to add scope (I'm assuming the easy way is to have the rest of your page use the manually scoped theme, and have jqgrid use the "default" scope, unless you want to dig into the jqgrid jquery extension code to see how to use a custom scope)
I haven't done this, but the strategy that I would use would be to define some alternate styles for your grid, keeping the same basic CSS definition layout that jQuery UI uses, but redefining the style content the way you want it. I'd make sure that these styles are included after the jQuery UI style sheet. Then I would use javascript on document load to go and apply the new CSS classes to elements of the jqGrid that have the matching jQuery UI classes to your styles.
I think it will be a major pain as there are many classes and I'm not sure that I would do it since sort of defeats the purpose of having a theme.
.jqgrid-widget { ... override widget styles ... }
.jqgrid-widget input, .jqgrid-widget select ...
.jqgrid-widget-content { ... override widget-content styles ... }
$(function() {
$('#myGrid .ui-widget').addClass('jqgrid-widget');
$('#myGrid .ui-widget-content').addClass('jqgrid-widget-content');
...
});
This function removes all (at least almost all) the jquery ui candy
/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
}