Medium Editor on nodeBB

[José Nogueira]

Hello,

First and foremost, i want to congratulate the developers on the amazing work done so far. NodeBB seems to be heading for success, let's hope so :).

Beforehand, I want to say I'm a novice programmer, and that i'm not used to modifying this kind of systems, namely forums and blogs and such (i'm referring to using hooks and such patterns), so I might be asking stuff that should be obvious..

Now, for my question:

How can I implement on nodebb a medium like editor like, for instance, this one? Is there one implemented?

I need to have a WYSIWYG editor for a forum I want to implement because my average user will likely be driven away because of a markdown editor. Not that I have empirical proof of that, but please humour me

My approach so far:

After having a go at a custom theme + widget (my first reasoning as to change the dual box layout and applying the script) without much success, I went for some monkey patching:

• Extending the preview container for full width (hide the write-container) and applying the medium script to the preview container through Custom CSS and custom header in the admin panel.

**My reasoning: **
The medium editor styles must be aplied to an htm tag other than textarea so I think I can use the preview container which is a div, and I imagine its the one going to be sent to the db, so it should work.

My problems so far:
script location:

• if I put the script on the nodebb/public folder, and refer to it like this: <script src="medium-editor.js">, it will be called on the forum home, but will not be found on other locations when reloaded because it will be looked for by reference to window.location, getting a file not found error e.g. (http://localhost:4567/category/2/medium-editor.js )
• if I make an explicit reference to its url like <script src="localhost:4567/medium-editor.js">, I get the following error: GET localhost:4567/medium-editor.js net::ERR_UNKNOWN_URL_SCHEME

theming:

• If I alter the templates on the composer.tpl on the public folder, it gets reset every time I reload the forum. where is the reset values coming from, i.e. where does it reference from?

requirejs conflict? :

• I get this error when using <script src="medium-editor.js"> :
  Uncaught Error: Mismatched anonymous define() module: function () {
  'use strict';
  return MediumEditor;
  }
  http://requirejs.org/docs/errors.html#mismatch
  nodebb.min.js?2042ab58:12 B
  nodebb.min.js?2042ab58:12 b
  nodebb.min.js?2042ab58:12 a
  nodebb.min.js?2042ab58:12
  requirejs(index):449 (anonymous function)
• EDIT: Well, I just removed the AMD support part, and it seems to not be a problem anymore. Maybe I'm being naive?

My questions:

• Should i better work with a custom theme instead of the default one?
• how should I deal with the script location problem?
• What's the better way to understand the working of the forum? I've read the wiki but feel it's not enough. I'll be trying to read the source, but where should I start, so I don't get lost?

Sorry for the long post..

thanks in advance!

[psychobunny]

That's an ambitious project for your first plugin... good luck

Instead of including this script, maybe you should use require.js to load it?
<script src="medium-editor.js">

Like this and I had to make a change in the lib itself like this to add the namespace

Also, the templates found in public/templates are compiled from themes and plugins. So you would either create a new plugin with a template directory containing a file called composer.tpl and it will overwrite the default theme's composer (the order of precedence is: core templates get overwritten by the base theme template, which gets overwritten by the custom theme's template, which finally gets overwritten by plugins.) Hope that makes sense

Lastly, I would make this a plugin not a theme, so that other themes can use your composer.

[José Nogueira]

@psychobunny thanks for your reply!

Your answer makes sense, i'll try to implement it as a plugin by looking at other plugins an trying to reason from there. I'll get on it tomorrow morning

I really wanted to dig deeper inside the mechanics behind nodebb.

Where do you think I should I start so I could get a good grasp of the whole system?

[Sim]

Could possibly use:

$.getScript("url_to_file.js");

??