?
avatar saibbyweb
saibbyweb
20 Oct 2016

Details

By default CodeMirror only highlights HTML, CSS and JAVASCRIPT (as far as I know) and I have started using this Sourcerer plugin which allows to insert PHP into modules and articles. It works perfectly but CodeMirror doesn't highlight any PHP syntax which makes it pretty hard to write code. I have used CodeMirror as a standalone module and I'm aware it come with different modes that can be set using JS on the textarea. I see this source code on my Edit Module page, its probably the piece of code to be edited but I don't know from where its generated.

   jQuery(function() {
       var id = "jform_content",
           options = {
               "autofocus": true,
               "lineWrapping": true,
               "styleActiveLine": true,
               "lineNumbers": true,
               "gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-markergutter"],
               "foldGutter": true,
               "markerGutter": true,
               "mode": "htmlmixed",
               "autoCloseTags": true,
               "matchTags": true,
               "scrollbarStyle": "native",
               "vimMode": false
           };
       Joomla.editors.instances[id] = CodeMirror.fromTextArea(document.getElementById(id), options);
   });

Need to add these two options to the above code:

        "matchBrackets": "true",
        "mode": "application/x-httpd-php",

and include these two files, probably:

       <script src="mode/php/php.js"></script>
       <script src="addon/edit/matchbrackets.js"></script>

System Information:


Setting Value

PHP Built On    Windows NT DESKTOP-JUUOFOO 6.2 build 9200 (Windows 8 Business Edition) i586
Database Version    5.6.24
Database Collation  latin1_swedish_ci
Database Connection Collation   utf8mb4_general_ci
PHP Version 5.6.8
Web Server  Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8
WebServer to PHP Interface  apache2handler
Joomla! Version Joomla! 3.6.2 Stable [ Noether ] 4-August-2016 23:41 GMT
Joomla! Platform Version    Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent  Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 

So which file creates the CodeMirror instance, where is it located in Joomla Directories?

avatar saibbyweb saibbyweb - open - 20 Oct 2016
avatar saibbyweb saibbyweb - change - 20 Oct 2016
The description was changed
avatar saibbyweb saibbyweb - edited - 20 Oct 2016
avatar brianteeman
brianteeman - comment - 20 Oct 2016

Codemirror cane be found in /media/editors
And the joomla interface to it in /plugins/editors

On 20 October 2016 at 09:54, saibbyweb notifications@github.com wrote:

Details

By default CodeMirror only highlights HTML, CSS and JAVASCRIPT (as far
as I know) and I have started using this Sourcerer plugin which allows
to insert PHP into modules and articles. It works perfectly but CodeMirror
doesn't highlight any PHP syntax which makes it pretty hard to write code.
I have used CodeMirror as a standalone module and I'm aware it come with
different modes that can be set using JS on the textarea. I see this source
code on my Edit Module page, its probably the piece of code to be
edited but I don't know from where its generated.

jQuery(function() {
var id = "jform_content",
options = {
"autofocus": true,
"lineWrapping": true,
"styleActiveLine": true,
"lineNumbers": true,
"gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-markergutter"],
"foldGutter": true,
"markerGutter": true,
"mode": "htmlmixed",
"autoCloseTags": true,
"matchTags": true,
"scrollbarStyle": "native",
"vimMode": false
};
Joomla.editors.instances[id] = CodeMirror.fromTextArea(document.getElementById(id), options);
});

Need to add these two options to the above code:

    "matchBrackets": true,
    "mode": application/x-httpd-php,

and include these two files, probably:

   <script src="mode/php/php.js"></script>
   <script src="addon/edit/matchbrackets.js"></script>

System Information:

Setting Value

PHP Built On Windows NT DESKTOP-JUUOFOO 6.2 build 9200 (Windows 8 Business Edition) i586
Database Version 5.6.24
Database Collation latin1_swedish_ci
Database Connection Collation utf8mb4_general_ci
PHP Version 5.6.8
Web Server Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8
WebServer to PHP Interface apache2handler
Joomla! Version Joomla! 3.6.2 Stable [ Noether ] 4-August-2016 23:41 GMT
Joomla! Platform Version Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

So which file creates the CodeMirror instance, where is it located in
Joomla Directories?


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#12486, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8WLFw94UgBnjTrG5E9DqxqItURkHks5q1zpOgaJpZM4Kb7pf
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
https://brian.teeman.net/ http://brian.teeman.net/

avatar zero-24 zero-24 - change - 20 Oct 2016
Labels Added: ?
avatar brianteeman
brianteeman - comment - 20 Oct 2016

By default CodeMirror only highlights HTML, CSS and JAVASCRIPT (as far as I know)

Actually it does highlight php when you edit php files as can be seen in this screenshot from the template manager. I am assuming that you are not seeing it when you type in the module using sourcerer because CodeMirror has no way of knowing that you are writing php

screen shot 2016-10-20 at 07 06 26

As it is not a core functionality of Joomla to write php code in your articles and modules this will need to be supported by your own code or the sourcerer plugin and not by the core of Joomla


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/12486.

avatar brianteeman brianteeman - close - 20 Oct 2016
avatar brianteeman brianteeman - change - 20 Oct 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-10-20 12:07:37
Closed_By brianteeman
avatar brianteeman brianteeman - close - 20 Oct 2016
avatar brianteeman brianteeman - close - 20 Oct 2016
avatar saibbyweb
saibbyweb - comment - 20 Oct 2016

It only highlights PHP in template files. Not in modules and articles.

I figured it out. Provided JSON string manually with desired values in this file:
\plugins\editors\codemirror\layouts\editors\codemirror\elements.php
and added the required JS files in
\administrator\templates\isis\index.php

Thanks for the directories.

BEFORE

screenshot 3

AFTER

screenshot 4

avatar brianteeman brianteeman - change - 20 Oct 2016
Labels Added: ?

Add a Comment

Login with GitHub to post a comment