Joomla stripping out #usemap - joomla

I have a map inside a TinyMCE editor in Joomla 3, and it seems like when it is saved Joomla is messing with the html. I just want no filtering or anything.
So this is the HTML I enter:
<img class="mapper noborder"
height="410"
id="Map_of_North_America"
name="Map_of_North_America"
src="/images/State Maps/Map_of_US_web_2014(1).png"
style="border-width: 0px; border-style: solid;"
usemap="#m_Map_of_North_America" width="476" />
and this is what Joomla saves:
<img class="mapper noborder"
src="images/State Maps/Map_of_US_web_2014(1).png"
width="476"
height="410"
name="Map_of_North_America"
style="border-width: 0px; border-style: solid;" />
It removes the id, as well as the usemap=
I have tried setting text-filtering to none, changing up the TinyMCE in the plugin manager etc... Thoughts?

I had the same problem however with JCE (I am not using TinyMCE) bu I guess, this could help :
in JCE / Edit Profile / Features and Layout: at the bottom : check the option "Adds support for OBJECT, EMBED, AUDIO, VIDEO and IFRAME elements. Required by the Media Manager and when inserting Adobe® Flash®, Quicktime® and other media file types"
in JCE / Edit Profile / Editor parameters/advanced : set all to yes
in JCE / Edit Profile / Plugin parameters/media support : set all to yes
This is what solve the problem for me :
Navigate to Content → Article Manager / Parameters (icon top right)
Scroll down to Filtering Options, highlight all Filter groups except Super Administrator, and select Filter type of Blacklist

You could also set the editor as No Editor in the Global Configurations and edit the article.

Go to: plugins/editors/tinymce
open tinymce.php
Find this
Found this section:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
}
add |usemap after style, just like:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style|usemap]';
}

Related

how to support margin-top and margin bottom in CKeditor

I am using CKeditor and I want to set margin-top and margin-bottom for many paragraphs in my text but it does not work. These what I have tried till now:
1- use margin top directly inside the editor
<h2 style="margin-top:40px">What are tokens?</h2>
2- I added a new style to contents.css:
p.ex1
{
margin-top: 100cm;
}
then in the editor I wrote:
<p class="ex1">What are tokens?</p>
Both ways did not work for, I am using a full toolbar of CKeditor v4.6.2
Any other way to try?
You need to tell CKEditor to load your CSS rules and to allow your class attributes in <p> tags:
Create a new file, let's say, my.css and put it in CKEditor root folder.
Inside my.css type your attributes, for example:
p.ex1
{
margin-top: 100px;
}
p.ex2
{
margin-top: 50px;
}
Now, in your config.js type this:
config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('my.css')];
config.extraAllowedContent = 'p(ex1,ex2)';
This will load my.css in addition to the CKEditor's own contents.css and instruct CKEditor to allow <p> tags with class attributes named "ex1" and "ex2", so you can have <p class="ex1">What are tokens?</p>
More info:
contentsCss and extraAllowedContent

CK Editor add style for a page

How could I add a style using CK Editor ?
I want to create a style which I will use it in the class attribute on the liferay editor .
For example -
In the page javascript section
CKEDITOR.XXXX(// add style class for red color called 'myRed')
and then in the editor -
<p class="myRed">Text</p>
would give red text .
Place in your theme:
.myRed {
color: red;
}
Then only include the class in source mode of the editor like you described in your question:
<p class="myRed">Text</p>
that's it.

Adding Fontawesome to ckeditor

I am using Fontawesome in my website and have my own CMS to edit the website pages. What I would like to develop is a dialog for the user where he can pick an fontawesome icon but for now it is OK to add them in the codeview of ckeditor.
Icons added to the content are not shown in ckeditor designview. I have changed ckeditor config file so that the editor accepts i tags (*). I added the fontawesome CSS file as an #import rule to contents.css but still no fontawesome icon visible in the editor area.
(*)config.js
config.allowedContent = true;
config.ProtectedTags = 'i' ;
config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
What can I do to make this work?
config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );
What you have will interfere with img tags.
AND OR, after all of config:
CKEDITOR.dtd.$removeEmpty['i'] = false;
Both work well. Just be sure you have cleared cache completely when making changes.
*EDIT
One works while messing something else up. A no go solution.
I stopped using this bulky editor. Created my own.
However, to solve the solution, use EM or SPAN instead of I tags for this.
When you add something to the protectedSource setting, you're hiding it from the editor, that content is converted into a HTML comment to protect it and avoid that it can be modified by the user, but being a comment it's obviously hidden.
I'm using 4.11.4 and this solution not working correctly
This solution correctly work on 4.11.4
config.protectedSource.push( /<i class[\s\S]*?\><\/i>/g ); // Font Awesome fix
Goodluck
Instead of:
config.protectedSource.push(/<i class[\s\S]*?\><\/i>/g );
use more stronger and best way:
config.protectedSource.push(/<i class="fa[s|r|l|b] [A-Za-z0-9\-]+"><\/i>/g);
Because when user pasting content from another source, CKEDITOR.dtd should remove empty < i >, or convert < i > to semantic < em >, but only fontawesome icons with class="fas/far/fal/fab *" should be preserved.
(Naming in fontawesome: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started)
Take a look at this: ckeditor fontawesome addon.
Basically, you should download the fontawesome addon in zip format, and extract to "ckeditor/plugins/", with the name "fontawesome".
Then, open "ckeditor/config.js" and signal the usage of the new addon:
config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;
The next thing is to edit your HTML's section:
<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
The final step is to use the toolbargroupname: "FontAwesome" in your toolbar:
config.toolbar = [
{ name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];
Here is a demo.
This also applies for glyphicons, in the same way the fontawesome is used.
Cheers

Firefox Add-on SDK: how to make Panel transparent

Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent.
Here is the code to show a panel:
var panel = require("sdk/panel").Panel({
width: 570,
height: 250,
contentURL: require("sdk/self").data.url("test.html")
});
panel.show();
I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.
Here goes:
(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.
(2) Add it to your addon package as a new file.
(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.
example:
change
const { validateOptions: valid } = require('./deprecated/api-utils');
to
const { validateOptions: valid } = require('sdk/deprecated/api-utils');
(4) Find line 137, and modify the variable css to your liking. Like so:
...
let css = [
".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule
".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders.
].join(" ");
...
(5) Use the modified version of panel.js instead of the one that came with the sdk.
That should be it. Like I said, it isn't particularly elegant.

Mootools accordian remote trigger in Joomla

I'm trying to customise the Joomla 2.5 Accordion contacts page to add a clickable map to trigger the accordion and I'm struggling. The accordion part works fine, and the map works fine with clickable areas, but I can't link the two.
The mootools accordion script that triggers the accordian is this (pretty standard Joomla contacts page version exept I added 'var OfficeAccordian =' on line 2:
window.addEvent('domready', function(){
var OfficeAccordian = new Fx.Accordion(
$$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler'),
$$('div#contact-slider.pane-sliders > .panel > div.pane-slider'), {
onActive: function(toggler, i) {
toggler.addClass('pane-toggler-down');
toggler.removeClass('pane-toggler');i.addClass('pane-down');
i.removeClass('pane-hide');
Cookie.write('jpanesliders_contact-slider',$$('div#contact-slider.pane-sliders > .panel > h3').indexOf(toggler));
},
onBackground: function(toggler, i) {
toggler.addClass('pane-toggler');
toggler.removeClass('pane-toggler-down');
i.addClass('pane-hide');i.removeClass('pane-down');
if($$('div#contact-slider.pane-sliders > .panel > h3').length==$$('div#contact-slider.pane-sliders > .panel > h3.pane-toggler').length)
Cookie.write('jpanesliders_contact-slider',-1);
},
duration: 300,
opacity: false,
alwaysHide: true
});
});
but the script I need to simulate a click on the accordion trigger when I click a link on the map (standard anchor button in a list) is beyond me. I've had a go at adapting a few examples from various websites, but none have worked. My javascript skills are not good enough yet to know why they aren't working or how to fix them.
(I'm not sure it needs to be mootools as I have mootools & jquery both loaded & working on the site)
The Fx.Accordion has an interface (API of methods the instance exposes so you can control it).
All it takes is reading the manual:
http://mootools.net/docs/more/Fx/Fx.Accordion#Fx-Accordion:display
OfficeAccordian.display(2);
if that is not enough, you read the source code:
https://github.com/mootools/mootools-more/blob/master/Source/Fx/Fx.Accordion.js#L157
this reveals you can pass a second argument to .display as boolean to use fx or not.
p.s. this is not how you spell accordion (OfficeAccordian). :)

Resources