This is my first post so I would like to say it's nice to join this community and I will do my best to help others but I'm the one that needs help right now.
--Problem
I've got problem with displaying proper styling of text retrieved from CKE with .getData(), saved into DB and displayed in article.
--When it works?
When I include this CSS:
<link rel="stylesheet" href="\js\ckeditor\contents.css">
in my base.html.twig <head> tag,this changes the css of the site.
--What do I need to do?
What I need to do to avoid conflict? or is there any method to render text without making it editable? Something like CKEDITOR.render(tagId)
--Some images:
With Regards
Wiktor
Please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
If you are using classic CKEditor then its contents are held inside an iframe with a separate document. In order to style that internal document CKEditor attaches contents.css to it. Since internal styles in separate CSS files are not being saved together with HTML or merged into HTML it is important that you use same styles inside contents.css as you would like to see on your target page (where saved content will be used).
This is not CKEditor bug but simply a different approach you need to apply inside your application.
If you are creating content for different pages you can either create one large contents.css file or, in case of any styles conflicts multiple CSS files which you can load dynamically based on some logic (it will require writing some code to handle that) using contentsCss setting. Please note that in case of dynamic CSS switching you do not want to use contentsCss inside config.js file but directly in instance configuration on HTML page where you can use server-side tags to "spit out" correct configuration for CKEditor instance e.g.
var editor = CKEDITOR.replace( 'editor1',{
language : 'en',
// other configuration settings
// ...
contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}
You can use server-side tag which will return whole editor configuration or simply only this part contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] or even correct file paths when HTML is being rendered.
Related
I have created 3 different html, css and javascript files but I am now confuse how can I interlink them and upload as a single file
Looks like you're just getting introduced to web development, these might come in handy for finding out how to bring your HTML, JS and CSS files together:
(Link JS File) - https://www.w3schools.com/tags/att_script_src.asp
(Link CSS file) - https://www.w3schools.com/tags/tag_link.asp
https://www.w3schools.com/
In order to make your codes to be run by browser you need to include all your sources in one .html file. You need to link those files inside this file and there are different requirement of each file extensions to be included.
In order to link CSS file you use link element with src attribute to indicate the source of your file. Another attribute rel defines the relationship between a linked resource and the current document. In here it is stylesheet document and need to get this value.
Sample: <link rel="stylesheet" href="styles.css">
In order to link your JS file, you need to use element which is used to define a client-side script (JavaScript). You may add it internally or externally. According to your question you need to add it externally. First, add your script element and then refer to it using the src attribute in the script tag.
Sample: <script src="myJSFile.js">
Resources for learning more in these topics:
https://www.w3schools.com/tags/tag_link.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
https://www.w3schools.com/tags/att_script_src.asp
To inter-link different HTML files together, you can just use Hyperlink, Hyperlinking is a feature of HTML to link multiple documents (HTML) files together. It'll show up as a button on your HTML.
Here's an example of how you can implement it. href="your-path-to-your-html"
Click here to visit school
Click here to visit inventory
Click here to visit battle
To understand more about hyperlinking, you can read this for better examples: https://www.w3schools.com/htmL/html_links.asp
My friend asked me to add a simple javascript to her page. Unfortunately it is built on joomla (which I have never used). I cannot find any place to include such a script. There are some empty indexes everywhere. Is there any way to do this? I just need to make the page scroll to some position after pressing a button.
Try to add your script in this file:
[sitename]/templates/[current_template]/index.php
You can find out the name of the current template in
Go to Administration > Extensions > Template Manager (it will be starred, see screen below)
After that you shold click on template name link, and on other page click Edit main page template for editing index.php (it depends from template).
The second way to find out the template name it's browser DevTools, see screen below.
Also you can edit template file via FTP + your text editor.
UPDATE: For Jm internet theme main template file is here:
[template_root]/tpl/default.php
Also main template layout can loads from these files: content-left-right.php, left-right-content.php etc. It depends from selected options in template settings.
Add this code in your template, the path may vary depending on the framework or structure of your template, most commonly the main file is called index.php.
$doc = JFactory::getDocument();
// In this example the js file is called main.js inside js folder
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript’);
Some templates also include an option to add your custom files or code directly
in your template configuration, check out the options of your template.
Regards.
I am working with ckeditor
I want to ask how can we set the font-family and font-size in this plugin,
I have tried using
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '12px';
but these commands just change the front-end (font name and size)
Whats the way out?
The most future-proof method(1) is to override the default CSS styles for CKEditor content that you want to change in a separate file, added to your editor configuration through the config.contentsCss option.
See the working sample for this scenario in the CKEditor SDK: http://sdk.ckeditor.com/samples/classic.html
Scroll down to the "Classic Editor with Custom Styles" sample there; you can download the exact source code of this solution in the "Get Sample Source Code" section on the sample page. In this case the custom font and other styles were defined in a separate classic.css file which is then provided to the editor instance configuration with:
<script>
CKEDITOR.replace( 'myeditor', {
/* Default CKEditor styles are included as well to avoid copying default styles. */
contentsCss: [ 'contents.css', 'classic.css' ]
} );
</script>
Do remember that it is only valid for classic editor as in inline editor content styles are the same as the page styles, so all content styling comes directly from the page stylesheets.
(1) This method is better than modifying the default contents.css file because you don't risk overwriting your changes when you upgrade CKEditor.
If you are using the classic editor, check the contents.css file in the root folder of CKEditor. You can change the styles, including fonts, for all HTML elements, also for the <body> element (the editing area).
Instead of modyfying the default config.css you may specify additional CSS files to be loaded with config.contentsCss, this will save you a headache with future upgrades. See Anna's comment.
This type question has been asked a number of times, but I can't find a solution that fits exactly what I am looking for..
I have a large App based in Ajax. Ajax responses includes HTML and JavaScript files used to build pages, widgets and so on.
I would like to load the CSS for these widgets on the fly via the ajax JavaScript calls. There can be any number of CSS files loaded dynamically as and when required. The most commonly accepted way (from what I can see) is to place an id on the link tag and target that, but as i am including an undetermined number of external style sheets, this will not work..
Any suggestions on how to solve this problem would be appreciated..
I am using Dojo to power the app, if that it of any help..
Thanks
We load as well many widgets on the fly in our app.
Each widget is an HTML + JS + CSS that is loaded with an IFRAME.
Once the IFRAME is loaded, you can loop on the LINK in the HEAD and import them in the main page.The same apply for the HTML, in our case it is a set of pure.js templates.
The JS extend automatically at load time a global object in the main page.
Be careful about dynamically loading CSS. CSS is loaded asynchronously so you can get race conditions with widgets that do layout in Javascript such as BorderContainer.
You can put all your necessary CSS in a file with import statements. For example, from claro.css
#import url("../dijit.css");
#import url("../../icons/commonIcons.css");
#import url("Common.css");
...
and then use the build tool to compact everything for production.
I have a classic ASP application that I've been constantly trying to modularize. Currently, almost all pages are divided in to two pages:
an outer page that contains the layout, header, sidebar, footer
an inner page that contains ASP code
The outer pages use dreamweaver templates so updating layout and replicating changes is easy. The inner pages are managed by me. Now here is the problem:
I had to add a lightbox to one page, I chose Lightbox 2 which requires Prototype. I ended up adding Prototype on every page, assuming that sooner or later I'll upgrade all pages, forms, ajax requests and other javascript to use Prototype. I've now added two other plugins -- Modalbox and Protofade; each with a pair of .JS and .CSS files. Since I'll be using these three plugins on specific set of pages I am wondering if I can load the required CSS and JS files dynamically. I do not want to access the document head and add include files there (i.e. by bloating the <head> tag with about a dozen <script> and <link> tags), I'll have to do this from inside a DIV where all ASP code is supposed to go.
You can add scripts dynamically by adding script elements to the document; details and sample code on the this page from Unofficial Prototype & script.aculo.us wiki. E.g.:
var element;
var script;
element = /* ...grab the element you want to add to; I'd use $$('head')[0] */;
if (element) {
script = new Element('script', { type: 'text/javascript', src: 'dynamic.js' });
element.appendChild(script);
}
Adding stylesheet links should be essentially the same. Although that page has you adding to the head, you've said you don't want to do that (though I'm not clear why not, since you're doing it dynamically on the user's machine), but it should still work regardless of where you add them.