How to customize discourse composer editor

Development

AI-generated summary

A user, YAN, is seeking to customize the Discourse composer editor to prompt users for image tags after uploading images. This feature aims to encourage users to follow a specific format and facilitate storage of well-tagged images in the database.

YAN attempted to modify JavaScript files but found it challenging due to unfamiliarity with Discourse and JavaScript. pfaffman advised against modifying core JavaScript files and suggested exploring alternatives, such as:

1

Our forum is expecting a feature: when images are uploaded, before users click the “reply” button, the textarea can automatically prompt up some instructions to ask for some tags for the image. e.g. there will be an extra line generated automatically after the line of the image in some fixed format, which can later be filled up by the users.

image
image898×294 36.6 KB

The reason we need this feature is that we need tags for all images in all posts/replies in the forum, and this simple mechanism can help our users to follow the rule, and help our server to store the well-tagged images in the database.

I’m trying to achieve this by modifying a few js files, such as
/discourse/app/assets/javascripts/discourse/app/components/composer-editor.js
or
/Users/yanxiaofeng/discourse/app/assets/javascripts/pretty-text/addon/upload-short-url.js

But I’m not quite familiar with discourse and js :rofl: I find a few plugins working with the composer editor but obviously they are not only changing one or two js files, and I’m confused about the scope and difficulty of building this feature.

Any comments/ideas/suggestions/references are appreciated!!!

2

You don’t want to do that. See Beginner’s guide to developing Discourse Themes

If you mean “tag” in the Discourse sense, tags are for topics, not uploads or posts, so you might need to implement those some other way, or perhaps you could use the Discourse tags for your purposes.

You might rather develop a plugin, which would let you create upload-specific “tags”. You might have a look at Video Upload to YouTube and Vimeo using Theme Component for an example of something that seriously changes how uploads work. You might, for example, want to have Discourse upload those images to some other site altogether rather than make Discourse be a file manager.