Re: Adding HTML and JS to wiki pages

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

Myname To
hello, can you please help me with this:




I recently installed mediawiki on Centos6.5 and after following the instructions for adding HTML and JS to
 wikipages:
http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was last modified on 22 August 2014, at 21:10.)

I can't use no simple javascript with wikimedia ...

First I checked in LocalSettings.php:

$wgUseSiteJs = true;
$wgAllowUserJs  = true;
$wgAllowUserCss  = true;

My Mediawiki is completely empty so I put Inside
 MediaWiki:YourScript.js nothing else than:

var helloWorld = document.getElementById('helloWorldID');
newPageElement.innerHTML = '<script type="text/javascript">
document.write('<b>Hello World</b>');
</script>';

also in MediaWiki:Common.js I have just one single code:

importScript('MediaWiki:YourScript.js');

and for the Template:helloWorld I did only that:
<div id="helloWorldID"></div>

and in MediaWiki:YourScript it stand one word:
{{helloWorld}}

... nothing happens (also after refresh, shift f5 etc.)
_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

svetlana
https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_%28users%29#mw.loader

3rd snippet

On Wed, 3 Sep 2014, at 22:46, Myname To wrote:

> hello, can you please help me with this:
>
>
>
>
> I recently installed mediawiki on Centos6.5 and after following the instructions for adding HTML and JS to
>  wikipages:
> http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was last modified on 22 August 2014, at 21:10.)
>
> I can't use no simple javascript with wikimedia ...
>
> First I checked in LocalSettings.php:
>
> $wgUseSiteJs = true;
> $wgAllowUserJs  = true;
> $wgAllowUserCss  = true;
>
> My Mediawiki is completely empty so I put Inside
>  MediaWiki:YourScript.js nothing else than:
>
> var helloWorld = document.getElementById('helloWorldID');
> newPageElement.innerHTML = '<script type="text/javascript">
> document.write('<b>Hello World</b>');
> </script>';
>
> also in MediaWiki:Common.js I have just one single code:
>
> importScript('MediaWiki:YourScript.js');
>
> and for the Template:helloWorld I did only that:
> <div id="helloWorldID"></div>
>
> and in MediaWiki:YourScript it stand one word:
> {{helloWorld}}
>
> ... nothing happens (also after refresh, shift f5 etc.)
> _______________________________________________
> MediaWiki-l mailing list
> To unsubscribe, go to:
> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

Myname To
Hello, I'm still wondering why javascript won't work wiht me ...I try a toolbar modification now. In MediaWiki:Common.js and User:Me/common.js but still nothing happens:
get the basic setup form here:
https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization#Basic_setup

and the costumization snippet from here:
https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization/Library

var customizeToolbar = function() {
    $('#wpTextbox1').wikiEditor('addToToolbar', {
    section: 'main',
    group: 'format',
    tools: {
        "strikethrough": {
            label: 'Strike',
            type: 'button',
            icon: '//upload.wikimedia.org/wikipedia/commons/3/30/Btn_toolbar_rayer.png',
            action: {
                type: 'encapsulate',
                options: {
                    pre: "<s>",
                    post: "</s>"
                }
            }
        }
    }
});
};
 
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar . . . */
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
    mw.loader.using( 'user.options', function () {
        // This can be the string "0" if the user disabled the preference ([[bugzilla:52542#c3]])
        if ( mw.user.options.get( 'usebetatoolbar' ) == 1 && mw.user.options.get( 'showtoolbar' ) == 1 ) {
            $.when(
                mw.loader.using( 'ext.wikiEditor.toolbar' ),
                $.ready
            ).then( customizeToolbar );
        }
    } );
}
// Add the customizations to LiquidThreads' edit toolbar, if available
mw.hook( 'ext.lqt.textareaCreated' ).add( customizeToolbar );


please help me with that ...



Myname To <[hidden email]> schrieb am 17:20 Mittwoch, 3.September 2014:
 


thank you Svetlana, do I have to copy the snipet in MediaWiki:Common.js instead of the import...? and what I have to change in the snipet? In http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages is nothing about the ResourceLoader ... Nico




svetlana <[hidden email]> schrieb am 16:19 Mittwoch, 3.September 2014:
 


https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_%28users%29#mw.loader

3rd snippet


On Wed, 3 Sep 2014, at 22:46, Myname To wrote:

> hello, can you please help me with this:
>
>
>
>
> I recently installed mediawiki on Centos6.5 and after following the instructions for adding HTML and JS to
>  wikipages:
> http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was last modified on 22 August 2014, at 21:10.)
>
> I can't use no simple javascript with wikimedia ...
>
> First I checked in LocalSettings.php:
>
> $wgUseSiteJs = true;
> $wgAllowUserJs  = true;
> $wgAllowUserCss  = true;
>
> My Mediawiki is completely empty so I put Inside
>  MediaWiki:YourScript.js nothing else than:
>
> var helloWorld = document.getElementById('helloWorldID');
> newPageElement.innerHTML = '<script type="text/javascript">
> document.write('<b>Hello World</b>');
> </script>';
>
> also in MediaWiki:Common.js I have just one single code:
>
>
 importScript('MediaWiki:YourScript.js');

>
> and for the Template:helloWorld I did only that:
> <div id="helloWorldID"></div>
>
> and in MediaWiki:YourScript it stand one word:
> {{helloWorld}}
>
> ... nothing happens (also after refresh, shift f5 etc.)
> _______________________________________________
> MediaWiki-l mailing list
> To unsubscribe, go to:
> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

svetlana
In reply to this post by Myname To
Working example which replaces edit box contents with 'NEWCODE'. This is a DOM operation.

----
var stuff = {
        doStuff : function() {
            $('#wpTextbox1').val('NEWCODE');
        }
};
 
$(document).ready( function() {
        mw.loader.using( [], stuff.doStuff );
} );
----

On Wed, 3 Sep 2014, at 22:46, Myname To wrote:

> hello, can you please help me with this:
>
>
>
>
> I recently installed mediawiki on Centos6.5 and after following the instructions for adding HTML and JS to
>  wikipages:
> http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was last modified on 22 August 2014, at 21:10.)
>
> I can't use no simple javascript with wikimedia ...
>
> First I checked in LocalSettings.php:
>
> $wgUseSiteJs = true;
> $wgAllowUserJs  = true;
> $wgAllowUserCss  = true;
>
> My Mediawiki is completely empty so I put Inside
>  MediaWiki:YourScript.js nothing else than:
>
> var helloWorld = document.getElementById('helloWorldID');
> newPageElement.innerHTML = '<script type="text/javascript">
> document.write('<b>Hello World</b>');
> </script>';
>
> also in MediaWiki:Common.js I have just one single code:
>
> importScript('MediaWiki:YourScript.js');
>
> and for the Template:helloWorld I did only that:
> <div id="helloWorldID"></div>
>
> and in MediaWiki:YourScript it stand one word:
> {{helloWorld}}
>
> ... nothing happens (also after refresh, shift f5 etc.)
> _______________________________________________
> MediaWiki-l mailing list
> To unsubscribe, go to:
> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

svetlana
IF you don't need to load anything with mw.loader, then a simpler -- also working -- snippet:

----
var stuff = {
        doStuff : function() {
            $('#wpTextbox1').val('NEWCODE');
        }
};

$(document).ready(stuff.doStuff);
----

On Thu, 4 Sep 2014, at 09:36, svetlana wrote:

> Working example which replaces edit box contents with 'NEWCODE'. This is a DOM operation.
>
> ----
> var stuff = {
> doStuff : function() {
>             $('#wpTextbox1').val('NEWCODE');
> }
> };
>  
> $(document).ready( function() {
> mw.loader.using( [], stuff.doStuff );
> } );
> ----
>
> On Wed, 3 Sep 2014, at 22:46, Myname To wrote:
> > hello, can you please help me with this:
> >
> >
> >
> >
> > I recently installed mediawiki on Centos6.5 and after following the instructions for adding HTML and JS to
> >  wikipages:
> > http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was last modified on 22 August 2014, at 21:10.)
> >
> > I can't use no simple javascript with wikimedia ...
> >
> > First I checked in LocalSettings.php:
> >
> > $wgUseSiteJs = true;
> > $wgAllowUserJs  = true;
> > $wgAllowUserCss  = true;
> >
> > My Mediawiki is completely empty so I put Inside
> >  MediaWiki:YourScript.js nothing else than:
> >
> > var helloWorld = document.getElementById('helloWorldID');
> > newPageElement.innerHTML = '<script type="text/javascript">
> > document.write('<b>Hello World</b>');
> > </script>';
> >
> > also in MediaWiki:Common.js I have just one single code:
> >
> > importScript('MediaWiki:YourScript.js');
> >
> > and for the Template:helloWorld I did only that:
> > <div id="helloWorldID"></div>
> >
> > and in MediaWiki:YourScript it stand one word:
> > {{helloWorld}}
> >
> > ... nothing happens (also after refresh, shift f5 etc.)
> > _______________________________________________
> > MediaWiki-l mailing list
> > To unsubscribe, go to:
> > https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

Krinkle
In reply to this post by Myname To
This not working has nothing to do with the MediaWiki software. It looks like you have a thing or to learn about javascript and programming in general. Here's a few tips. Your script has various issues that contradict how javascript works.

If you'd run this on a regular web page without MediaWiki, Common.js, importScript, Templates,etc. it will also not work.

1) Can't have multi line string literals in javascript.

If you look at the browser console[1], you'll probably see a SyntaxError due to an illegal token in the script. To have multiple lines you need a \n character or escape the literal line break with a slash.

  var foo = 'line 1\nline 2';
  var bar = 'line A\
line B';

2) Quotes need escaping.

In your snippet the single quote before the "<b>"-tag stops the inner html string and then runs the < character as part of javascript syntax which doesn't work.

3) Unknown variable 'newPageElement'.

I think you meant helloWorld. This also generated an error that you could detect yourself via the console [1].

4) JavaScript inside script tags is not evaluated in dynamically parsed HTML.

To execute javascript in javascript, write is as regular javascript. Not as javascript in a script tag in html in javascript.

The innerHTML feature can parse and create elements, and it will also create a script element. But it will not execute the actual code because it has no runtime context. e.g. document.write doesn't work because the document has already been parsed.

5) To create and render new elements, use the DOM interface.

document.createElement [2]
Node.appendChild [3]

For example:

  var helloWorldElement = document.getElementById('helloWorldID');
  var msgElement = document.createElement('b');
  var msgText = document.createTextNode('Hello world');

  msgElement.appendChild(msgText);
  helloWorldElement.appendChild(msgElement);

See also http://jsfiddle.net/7f9uko44/

Again, this is not related to MediaWiki. This is how web browsers, javascript and HTML work in general.

-- Krinkle

[1]
https://developer.chrome.com/devtools/index
https://developer.chrome.com/devtools/docs/console
[2]
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
[3]
https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

On 3 Sep 2014, at 14:46, Myname To <[hidden email]> wrote:

> MediaWiki:YourScript.js nothing else than:
>
> var helloWorld = document.getElementById('helloWorldID');
> newPageElement.innerHTML = '<script type="text/javascript">
> document.write('<b>Hello World</b>');
> </script>';
>
> also in MediaWiki:Common.js I have just one single code:
>
> importScript('MediaWiki:YourScript.js');
>
> and for the Template:helloWorld I did only that:
> <div id="helloWorldID"></div>
>
> and in MediaWiki:YourScript it stand one word:
> {{helloWorld}}
>
> ... nothing happens (also after refresh, shift f5 etc.)
>


_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

[MediaWiki-l] Adding HTML and JS to wiki pages

Myname To
In reply to this post by Myname To
Hello, can anybody reply me with a simpel howto use and test js in mediawiki like here:

https://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages

That instructions don't work for me.

I have the latest version of mediawiki and centos 6.5. Everything else like extensions works fine. Thank you.

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

Larry Silverman
In reply to this post by Myname To
Isn't it a very significant security risk to allow users to write arbitrary
javascript that could get shown to every other wiki user who visits the
site? If this is a public wiki we're talking about that allows free
registration, this would be something you simply cannot allow.

Larry Silverman
Chief Technology Officer
TrackAbout, Inc.


On Wed, Sep 3, 2014 at 7:46 AM, Myname To <[hidden email]> wrote:

> hello, can you please help me with this:
>
>
>
>
> I recently installed mediawiki on Centos6.5 and after following the
> instructions for adding HTML and JS to
>  wikipages:
> http://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages (the page was
> last modified on 22 August 2014, at 21:10.)
>
> I can't use no simple javascript with wikimedia ...
>
> First I checked in LocalSettings.php:
>
> $wgUseSiteJs = true;
> $wgAllowUserJs  = true;
> $wgAllowUserCss  = true;
>
> My Mediawiki is completely empty so I put Inside
>  MediaWiki:YourScript.js nothing else than:
>
> var helloWorld = document.getElementById('helloWorldID');
> newPageElement.innerHTML = '<script type="text/javascript">
> document.write('<b>Hello World</b>');
> </script>';
>
> also in MediaWiki:Common.js I have just one single code:
>
> importScript('MediaWiki:YourScript.js');
>
> and for the Template:helloWorld I did only that:
> <div id="helloWorldID"></div>
>
> and in MediaWiki:YourScript it stand one word:
> {{helloWorld}}
>
> ... nothing happens (also after refresh, shift f5 etc.)
> _______________________________________________
> MediaWiki-l mailing list
> To unsubscribe, go to:
> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
>
_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

svetlana
Larry Silverman wrote:
> Isn't it a very significant security risk to allow users to write arbitrary
> javascript that could get shown to every other wiki user who visits the
> site? If this is a public wiki we're talking about that allows free
> registration, this would be something you simply cannot allow.

No. Mediawiki:* namespace is protected which is sysops-editable.

mailusenet wrote:
> Hello, can anybody reply me with a simpel howto use and test js in mediawiki like here:
>
> https://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages
>
> That instructions don't work for me.
>
> I have the latest version of mediawiki and centos 6.5. Everything else like extensions works fine. Thank you.


I looked at their example and rewrote it like this, as JQUERY is in MediaWiki core and it saves typing effort:

--
var stuff = {
        doStuff : function() {
                $('#mw-mywiki-example').html('any HTML');
        }
};
 
$(document).ready(stuff.doStuff);
--

It works for me! What have you got - feel free to email (to me or to the ML) your wiki URL and I'll try to look.

svetlana

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding HTML and JS to wiki pages

svetlana
svetlana wrote:

> Larry Silverman wrote:
> > Isn't it a very significant security risk to allow users to write arbitrary
> > javascript that could get shown to every other wiki user who visits the
> > site? If this is a public wiki we're talking about that allows free
> > registration, this would be something you simply cannot allow.
>
> No. Mediawiki:* namespace is protected which is sysops-editable.
>
> mailusenet wrote:
> > Hello, can anybody reply me with a simpel howto use and test js in mediawiki like here:
> >
> > https://www.mediawiki.org/wiki/Adding_HTML_to_wiki_pages
> >
> > That instructions don't work for me.
> >
> > I have the latest version of mediawiki and centos 6.5. Everything else like extensions works fine. Thank you.
>
>
> I looked at their example and rewrote it like this, as JQUERY is in MediaWiki core and it saves typing effort:
>
> --
> var stuff = {
> doStuff : function() {
> $('#mw-mywiki-example').html('any HTML');
> }
> };
>  
> $(document).ready(stuff.doStuff);
> --
>
> It works for me! What have you got - feel free to email (to me or to the ML) your wiki URL and I'll try to look.
>
> svetlana

This one works too:

$('#mw-mywiki-example').html('any HTML');

svetlana

_______________________________________________
MediaWiki-l mailing list
To unsubscribe, go to:
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l