Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+1 vote
1.5k views
in Plugins by
edited by

I was using Q2A version 1.6.3 in December of 2014 and just installed 1.7 on a different server after it was released in January 2015.

I noticed that the directory structure differs between the two with regards to the WYSIWYG editor plugin:

Version 1.6.3
question2answer/qa-plugin/wysiwyg-editor/
question2answer/qa-plugin/wysiwyg-editor/.htaccess
question2answer/qa-plugin/wysiwyg-editor/adapters/
question2answer/qa-plugin/wysiwyg-editor/ckeditor.js
question2answer/qa-plugin/wysiwyg-editor/ckeditor_basic.js
question2answer/qa-plugin/wysiwyg-editor/ckeditor_basic_source.js
question2answer/qa-plugin/wysiwyg-editor/ckeditor_source.js
question2answer/qa-plugin/wysiwyg-editor/config.js
question2answer/qa-plugin/wysiwyg-editor/contents.css
question2answer/qa-plugin/wysiwyg-editor/images/
question2answer/qa-plugin/wysiwyg-editor/lang/
question2answer/qa-plugin/wysiwyg-editor/LICENSE.html
question2answer/qa-plugin/wysiwyg-editor/plugins/
question2answer/qa-plugin/wysiwyg-editor/skins/
question2answer/qa-plugin/wysiwyg-editor/themes/
Version 1.7
question2answer/qa-plugin/wysiwyg-editor/
question2answer/qa-plugin/wysiwyg-editor/CUSTOMIZE.md
question2answer/qa-plugin/wysiwyg-editor/metadata.json
question2answer/qa-plugin/wysiwyg-editor/ckeditor
question2answer/qa-plugin/wysiwyg-editor/qa-plugin.php
question2answer/qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php
question2answer/qa-plugin/wysiwyg-editor/qa-wysiwyg-upload.php

 

So on my 1.6.3 version, I installed this code editor SyntaxHighlighter plugin to the editor, and it had instructions for how to install it based on the directory structure in 1.6.3. However, since the 1.7 directory structure differs, I cannot install it the same way. There is a config.js as well as a plugins subdirectory in the ckeditor directory, but making the same modifications has no effect.

I then read the CUSTOMIZE.md file in the 1.7's wysiwyg-editor directory and it said that you can modify the ckeditor now using a tool online, and one of the modifications is adding a code snippet and code editor plugin. I did that, put the new "ckeditor" folder in place of the existing one, and I still am not having the code editor show up as an option in the wysiwyg editor. Is there a place I have to actively turn it on or enable it?

My question boils down to one of two things: either a) how do I use the SyntaxHighlighter plugin for version 1.7, or b) what is the proper way to build the ckeditor and enable the code snippet/code editor plugin?

Edit: FYI, this is what my editor looks like:

Q2A version: 1.7

1 Answer

+1 vote
by
edited by

I think the issue is that the plugin you've downloaded only works for CKEDITOR v3. Q2A 1.7 uses v4. There is what seems to be an updated version of that plugin here http://ckeditor.com/addon/syntaxhighlight. So follow the instructions there.

One more thing. Don't use 1.7.0. In order for this to work use the most updated Q2A version... let's call this a 1.7.1-beta: https://github.com/q2a/question2answer/archive/49e086ad1383a1c81cbbba5e9a0218a3e0818d05.zip

Yeah, awful link! This one will allow you to configure the config.js file properly.

Result:

by
Ah okay, so it turns out I was making a rookie mistake and my issue was due to browser caching - even though I would change the config.js, the original config.js kept being reflected. So I did both the steps you suggested in your answer (upgraded to question2answer-1.7.1-beta and used that link to download an entirely new ckeditor) and the plugin worked and the button showed up (after clearing cache). However, because I downloaded an entirely new ckeditor, all the buttons were moved around - not desirable.

Next, I did what you said in your follow-up comment, and this all seems to make more sense, and I placed the syntaxhighlighter folder in the ckeditor folder, and added the "config.extraPlugins = 'syntaxhighlight';" line into config.js, but I am hung up where it says, "If the plugin doesn't appear try adding an item called 'Syntaxhighlight' to your toolbar." I have no idea where to add that? If I could figure that out, I think that's the one thing I am missing, because that is the behavior I want - a 3rd line where Remove Format, Maximize, and Code are all together, like in your picture.
by
Triple check the instructions :P

The button you need to add is not 'Code' but rather 'Syntaxhighlight'
>>
If the plugin doesn't appear try adding an item called 'Syntaxhighlight' to your toolbar
<<

In config.js it should look like this:

{ name: 'last', items: [ 'RemoveFormat', 'Maximize', 'Syntaxhighlight' ] }

I had a bad time figuring this out myself and also faced the cache issue. I just forgot to mention it!
by
You're a genius! That's what did it. Thanks for the detailed explanation.

So since I have downloaded this beta version, if I ever post in the future to this Q&A, what version should I say I am using?

(Perhaps I can upgrade when GA 1.7.1 comes out...)
by
Pointing to the commit (the link or this SHA 49e086ad1383a1c81cbbba5e9a0218a3e0818d05), IMO, is the best thing for now. Once 1.7.1 is out just update to that version as it should include all these ckeditor changes.

As a side note, be careful when updating not to replace the ckeditor files but rather apply all changes you've done to the new version, so keep this post handy :)
...