w8tcha / ckeditor-codemirror-plugin Goto Github PK

my env:

• jQuery v1.8.3
• CKEditor 4.0 revision 769d96134b
• CodeMirror version 3.0
• "codemirror" plugin, released Dec 29, 2012

If you want the mode at start of ckeditor set to 'source'

CKEDITOR.replace( 'mytextarea', {
      startupMode: 'source'
   });

-> it will break with following error: "ReferenceError: CodeMirror is not defined"

Problem located in plugin.js line 29:

CKEDITOR.scriptLoader.load(rootPath + 'js/codemirror.js', function (success) {
                CKEDITOR.scriptLoader.load([rootPath + 'js/xml.js', rootPath + 'js/javascript.js', rootPath + 'js/css.js', rootPath + 'js/htmlmixed.js']);
            });

So I tried to load the needed scripts with page load:

<script type="text/javascript" src="/assets/ckeditor/plugins/codemirror/js/codemirror.js?body=1">
<script type="text/javascript" src="/assets/ckeditor/plugins/codemirror/js/xml.js?body=1">
<script type="text/javascript" src="/assets/ckeditor/plugins/codemirror/js/javascript.js?body=1">
<script type="text/javascript" src="/assets/ckeditor/plugins/codemirror/js/css.js?body=1">
<script type="text/javascript" src="/assets/ckeditor/plugins/codemirror/js/htmlmixed.js?body=1">

-> now the source-content in CKEditor is empty !!!
Pressing two times the source-button makes codemirror work !

My workaround till this problem exists:

CKEDITOR.replace( 'mytextarea', {
    on: {
        instanceReady: function() {
            this.setMode('source'); 
        }},
      startupMode: 'wysiwyg'
   });

With this workaround the scriptloader will work - you will see for a short time the ''wysiwyg'-mode and then the highlighted code.

problem:
the "exec: function (editor)" of CKEDITOR.plugins.sourcearea is called first after pressing the source-button

possible Solution:
move the first call in init function

I found this page: http://rondvorak.com/browse/browse/ckeditor-codemirror/
The implementation (with older code) is here with adding a plugin instead of overwriting.....but it looks also if first the 'wysiwyg'-mode is called....

This is another idea, that would help a lot.

Mainly when switching from WYSIWYG, it is often hard to find the spot where you want do do a small edit.

There's a solution for the standard-source-view here:
https://dev.ckeditor.com/ticket/3709

plugin.js

About line 523 window["codemirror_" + editor.id] is null in the onchange delayed callback.

About line 538 window["codemirror_" + editor.id] is null in the oncursorActivity callback.

The expression needs to be tested as the mode switch causes it to go out of scope I guess

I am unable to populate editor contents with setData() when in source mode.
This works fine without the codemirror plugin.

Steps:

1. CKEDITOR.instances.editor.setData('abc');
2. CKEDITOR.instances.editor.setMode('source');
3. CKEDITOR.instances.editor.setData('abcdef');

When indents are created by using spaces instead of tabs (\t), HTML will read them as spaces. This is problematic because there are cases where we want to have breaks & indents before/after inline HTML elements in source view, but when indents are rendered as spaces, we get unwanted spacing on HTML pages.

For example the following...
<p>
    The
    <span class="example-here lorem-ipsem">
        quick
    </span>
    , brown fox...
</p>

...would be rendered in HTML as "The  quick , brown fox..." instead of "The quick, brown fox...".

Add option to Comment/Uncomment Selected code

I've some problems to render CodeMirror in Twitter Bootstrap tabs.

A solution can be to call the "refresh" method from the CodeMirror instance ... something like this:

// On tab click
$('.sourcecode').each(function()
{
      $(this).data('CodeMirrorInstance').refresh();
});

How can I retrieve the CodeMirror instance created by your plugin?

What do you think about a Grunt build script? The current axajmin method works for some, but leaves out the people that don't use Windows.

A build script based on Grut on the other hand, will provide an universal build method. It depends on Node.js, but this environment should be pretty familiar to all JavaScript developers by now.

If you are interested, I can provide a small build script.

Line 32 of selectall plugin needs to be changed to

if (editable.isVisible( )) editable.focus();

Maybe this is not possible, but if it is, eg. search should use the existing button.

If reusing is impossible, maybe one can just simulate it, by hiding the WYSIWYG-Search and showing the Source-Search, have both use the same image and position them next to another.

As visible on the above picture the label for the autoFormat button isn't being displayed properly. The problem is caused by a mistyped property name in the language files:

CKEDITOR.plugins.setLang( 'codemirror', 'en', {
    toolbar: 'Source',
    autoFormatl: 'AutoFormat', // NOTICE THE 'l' AT THE END OF autoFormat
    commentSelectedRange: 'Comment Selection',
    uncommentSelectedRange: 'Uncomment Selection'
});

Is there a reason why they are disabled in source mode?

Capital letter I
Smalle letter i
Number 1

When using the autogrow plugin with CKE 4.0.1, the Codemirror content height is calculated wrong. (51px in my case.) When adding autogrow to disabled plugins, all works fine.

Working with Source Dialog, inline ckeditor - although it looks like it's occurring in the source dialog for framed editors also. New lines do not always show up and the cursor disappears. For example, using the demo page, I begin typeing an opening paragraph tag. The tag autocompletes, but then the new line and cursor are no longer visible. Line numbers 3 and 4 are displayed on top of each other as well.

Thanks for the inline update, but now it is impossible to use source code for me :(

The select with mouse is very difficult... i can't select text where i want.
When a SPAN take two lines, i can't select the second line, if i try the text desapear, or select an other word...
I can only select some words at the beginning of the span.

And when i can select to line to write, some time it works, but many times it write nothing!
and some other times it write not a the good place lol

For exemple i write where there is the pipe (|) :
Exe|meple
and it write there : Exemep|le
So strange and impossible to understand why :(

never mind i try find out before ask wish i could delete this again

I went to http://ckeditor.com/builder and selected the standard preset,
added a couple of plugins and downloaded the files. When i tried to run
'samples/replacebyclass.html', ckeditor didn't show up and in google
chrome i got the following error message:

"Uncaught TypeError: Cannot read property 'toolbar' of undefined"

in firefox i got:

"TypeError: a.lang.sourcearea is undefined".

Downloading the preset without adding plugins, ckedit worked, so i figured
there must be a problem with one of the plugins.
After some try and error (and lots of downloading), I think i got the
problem: Whenever I add the plugin 'Codemirror Syntax Highlighting' in the
mix, the error occurs. Without it it works fine.

reposted from:
http://dev.ckeditor.com/ticket/9825

Hi

On CKE v4.1 i have add the last "Minor Update" inline source editor.
It open a dialog box with the source code inside.
And it works very well.

Will you release an update to support it with your excellent mod ?
I can test it for you if you want.

Thanks
Bye

I have run into a problem when loading CKEditor directly into source mode, using codemirror(the latest github master version). Most of the time everything worked, but some of the times, the console was saying:

CodeMirror is not defined - this happened when loading codemirror.addons.min.js. Observing networking, it showed that this file, addons.min.js was loaded before codemirror.min.js, resulting in this error most probably.

My workaround was to use autoLoadCodeMirror to false and change the code on plugin.js a bit to:

        var sourcearea = CKEDITOR.plugins.sourcearea;
        editor.addMode('source', function(callback) {
            if (typeof (CodeMirror) === 'undefined') {
                //here I removed the .concat and basically copied the code that lives 4 lines above this.
                CKEDITOR.scriptLoader.load([rootPath + 'js/codemirror.min.js'], function() {
                    CKEDITOR.scriptLoader.load(getCodeMirrorScripts(), function() {
                        loadCodeMirror(editor);
                        callback();
                    });
                });
            } else {
                loadCodeMirror(editor);
                callback();
            }
        });

Hope this helps.

The error:

window[("codemirror_" + editor.id)] is undefined

occurs whenever an editor is initialised and then set to readOnly() mode.

E.g.

var editorInstance = null;

$('#form').ckeditor(function() {

        editorInstance = CKEDITOR.instances['form'];
});

$('button.lock').on('click',function(ev) {
    if(editorInstance) {
        editorInstance.setReadOnly();
    }
});

Then clicking on the 'lock' button produces the error (and vice versa, when using editorInstance.setReadOnly(false));

It seems to get in trouble when loading with 2 or more editors at the same time and switching between them from wysiwyg to source-code-view.

A really good addition would be UI elements (toolbar-buttons) for functions like search, indent, turn on/off autocomplete...
Using CKEditor's toolbar is surely different, but the screenshot in this CodeMirror plugin for TinyMCE gives a good idea:
http://drupal.org/project/wysiwyg_codemagic
maybe a help-button, explaining the available shortcuts could be easyer to do, and would help a lot.

Is really to make that these tags do not removed from the text when will formatted?
<! DOCTYPE html>, <html>, <body>

I tried edit cms template but this problem

I've got CEditor placed in div styled "text-align: center". And now, what can I see, a source (Codemirror mode only) is centered also.

So I suggest to extend default css by:

.CodeMirror{ (...) text-align:left;}

what exactly I have done.

Uncaught TypeError: Cannot read property '$' of null codemirror/plugin.js:124
(anonymous function) codemirror/plugin.js:124
h ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fire ckeditor.js:13
CKEDITOR.editor.resize ckeditor.js:260
e ckeditor.js:772
a.addCommand.exec ckeditor.js:774
exec ckeditor.js:162
CKEDITOR.tools.extend.execCommand ckeditor.js:195
CKEDITOR.tools.extend.click ckeditor.js:534
c.execute ckeditor.js:535
(anonymous function) ckeditor.js:536
(anonymous function) ckeditor.js:26
CKEDITOR.tools.callFunction ckeditor.js:27
onclick

Uncaught TypeError: Cannot use 'in' operator to search for 'class' in null ckeditor.js:771
p ckeditor.js:771
a.addCommand.exec ckeditor.js:775
exec ckeditor.js:162
CKEDITOR.tools.extend.execCommand ckeditor.js:195
CKEDITOR.tools.extend.click ckeditor.js:534
c.execute ckeditor.js:535
(anonymous function) ckeditor.js:536
(anonymous function) ckeditor.js:26
CKEDITOR.tools.callFunction ckeditor.js:27
onclick

ckeditor.js -> full 4.0

The script call for jQuery is causing issues. It produces the errors shown. And below you see how it is duplicating that one include multiple times. So many JS errors is because I was scrolling up and down a lot. Trying to see where the code was disappearing.

Using all of the latest versions. In fact, JUST re-downloaded CodeMirror.

the feature is well-hidden for users, no hint on it, non-standard keybinding...

PS:
Maybe a help-button could ease the fact of "hidden" key bindings in general (i guess the text in the standard About-dialogue can not be changed...

orginal source (in CKE 4.3):

<p>Z okazji zbliżających się Świąt Bożego Narodzenia - pragniemy życzyć Państwu....</p>

step 1 - backspace anywhere
step 2 - switch to source editing
step 3 - switch to normal editing mode
step 4 - undo
then source will be:

<p>Z okazji zbliżających się Świąt <span id="cke_bm_291C" style="display: none;">&nbsp;</span>o Narodzenia - pragniemy życzyć Państwu....</p>
or:

step 1: backspace anywhere
step 2: undo
step 3: switch to source
then:

<p>Z okazji <span id="cke_bm_381C" style="display: none;">&nbsp;</span>zbliżających się Świąt Bożego Narodzenia - pragniemy życzyć Państwu....</p>

I see the code here is a lot newer then on CKEditor.com.
Was this forgotten, or is it for a reason?

Also, here i can only see the commits, does something like a version-numbering / changelog-File exist at all?
EDIT:
Just now i saw the RELEASES link on the homepage... So only the question about updating the ckeditor site is left open...

Keeping selection works both ways, but cursor position does only one way:
Source to WYSIWYG is ok.
Switching to source, there seems to be no focus on the source area.
So you need to click to get a cursor. This happens with or without a set selection.

Here
http://ckeditor.com/addon/textselection
is a mention of (maybe) the same problem, the answer there is

Issue should be fixed with TextSelection Plugion 1.01 and CodeMirror Plugin 1.11
but i can't see a CodeMirror Plugin 1.11 anywhere...

Disabling the Codemirror Plugin, keep selection works as expected.

Tested on Ubuntu, Chromium 31

Is there a way to get codemirror to stop removing empty tags?

<div class="service-icon"><i class="icon-exchange"></i></div>

gets rewritten to:

<div class="service-icon">&nbsp;</div>

but only when codemirror is enabled so I know it's not a CKEditor config that needs changing.

Thanks.

Since version 4.2.2, CKEditor no longer includes the CodeMirror plugin on their website. It is no longer included in the full-featured CKEditor demo [1], and also the CKBuilder tool [2] no longer lists the CodeMirror plugin. That's a real pity, because we want to include CKEditor (including the CodeMirror plugin) in the next release of Hippo CMS [3]. At the CKEditor forum sebstefanov mentioned that the CodeMirror plugin may not be compatible with CKEditor 4.2.2 and up [4]. Is that true? If so, what needs to be done to make it compatible again with CKEditor 4.3?

[1] http://ckeditor.com/demo#full
[2] http://ckeditor.com/builder
[3] http://www.onehippo.org/7_8/library/about/roadmap.html
[4] http://ckeditor.com/comment/128802#comment-128802

I wonder if it would be possible to use underscores rather than hypens in .min files as my environment (crm2011) doesn't allow hypenated filenames?

Add an option for automatic formatting when switching to source view

if you click on the link on the site,
http://ckeditor.com/addon/codemirror
you will get here, where the latest relaease is 1.09, but on ckeditor it's actually 1.10...

Is there a config setting to enable CodeMirror for Source Dialog (http://ckeditor.com/addon/sourcedialog) as shown in your examples?

If you have a <script> tag in your content, CodeMirror generates a JavaScript error.

Uncaught TypeError: Cannot read property 'matches' of undefined codemirror.mode.htmlmixed.min.js:1

Error is in Chrome and Firefox at least.

To show off better, a Demo with jsFiddle or similar would be really cool.

Example:
http://ckeditor.com/addon/texttransform

I am having a hard time getting my CKE configured with Code Mirror so that the source code that I enter is unmodified.

I have yet to find a way of maintaining white space.

For example:

using source view

<pre>
<code>
function test_name (){
    echo 'name';
}
</code>
</pre>

Saving the content and then using the WYSIWYG shows me

function test_name (){
    echo 'name';
}

Heading back to the source mode gives me

function test_name (){
echo 'name';
}

I cant figure out how to keep the white space before echo.

Any ideas?

I cannot seem to enable the javascript highlighting, forcing the mode to "text/css" works perfectly, but forcing it to "text/javascript" does not do anything.

Hi,

It seems that my codemirror doesn't know how to read and display the id after i saved one.

Any ideas?

Cheers

It seems like the cursor position and insertion position are not synchronised - about every 50 lines of code the insertion position is 50+1

Hello.
I just installed codemirror ckeditor plugin and everithing works fine except I can't use 'application/x-aspx' mode. I notice that in the plugins folder theres a 'codemirror.mode.htmlmixed.min.js' file but no 'codemirror.mode.htmlembedded.min.js'
Is it possible to add this functionality in ckeditor plugin?
Thanks

Was lucky to get it in the screenshot. As I scroll down the code eventually vanishes until I scroll up than randomly appears. I narrowed it down to the PHP includes.

I know there is only one include, its being duplicated. At one point saw 10+ duplications from scrolling up and down.

Get this by just scrolling up and down continuously.

Using the latest 1.10 and latest 4.2.3 of CKEditor.

Afer switching to source edit (via CodeMirror) plugin is going to resize CKEditor window (width).

and after:

Currently, the build process of CKEditor requires that the icon names located in the icons folder must be all lowercased.

When in source mode, the paste context menu when you right click is no longer working. Ctrl-v is all that works now, and believe it or now, lots of people don't know about that.

CKEditor "Select All" command button (CKEditor plugin selectall) doesn't seem to work with CodeMirror plugin when editing editor source.

So select all plugin should be changed to use

instCodeMirror.execCommand('selectAll');

I have no slightest clue how to make this work without breaking things, but this would be nice.

I've just downloaded (yesterday) new CKEditor using custom build with CodeMirror. I'm realy glad to first time see that highlighting brackets are working :) But... I had some empty buttons in editor. In console I could see that was not included icons (apache 404).

I was looking for them in zip but I couldn't find it. I know that I can download it from other website.. but it should be inside custom build of ckeditor.