How to add search by CTRL-F in Joomla codemirror editor

When working with template files like css in Joomla the codemirror editor is used. However, a great annoyance is that it is not possible to use the browser search (CTRL-F) to find code. When your css becomes large this can be really annoying.

There is a search addon available for codemirror however. This is how you add it to your codemirror editor in Joomla:

Download these files:

https://codemirror.net/addon/search/search.js
https://codemirror.net/addon/search/searchcursor.js

Upload the files into your Joomla and place them in the <Joomla root>/media/editors/codemirror/lib directory.

Edit the file <Joomla root>/plugins/editors/codemirror/layouts/editors/codemirror/init.php

Find the two lines (around line 19-20) looking like this:

JHtml::_('script', $basePath . 'lib/codemirror' . $extJS);
JHtml::_('script', $basePath . 'lib/addons' . $extJS);

After them, add the following lines:

JHtml::_('script', $basePath . 'lib/search.js');
JHtml::_('script', $basePath . 'lib/searchcursor.js');

Save the file and enjoy searching in codemirror using the commands described in the search addons page (like CTRL-F etc)!

Note: A future possible system update will however overwrite the changes made in init.php.

Solution by Stefan Helander, HelTech Communication AB.