Is it possible to move the Build Poll option (on desktop) out of the extra menu and next to the rest of the formatting buttons?
Like your request on mobile, it requires a bit more complex editing, that I can’t add on this theme component. But it should be doable on a custom component for desktop following the logic presented by angus and spirobel.
3 إعجابات
How would one remove the center and align left + right buttons?
love this component by the way.
Hi!
You can add these css lines in your theme or in a component:
.align_center_button, .align_right_button, .align_justify_button {
display: none;
}
I guess you meant justify button, since align left has not been added in the same component
إعجاب واحد (1)
Is it possible to move all of these new buttons within the Options button/menu?
It’s possible but you’d need to dig in the code a little bit
In the Desktop > Head you’ll have all the javascript, you need to change a few lines.
Example the code for a button in the toolbar looks like this
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "underline_button",
group: "fontStyles",
icon: "underline",
perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
});
});
You need to change by using this
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "underline",
icon: "underline",
label: "underline_button"
};
});
And add the action in this part:
api.modifyClass("controller:composer", {
actions: {
underline() {
this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
},
floatleft() {
this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
},
columns() {
this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
}
}
});
The translation should be ok
You’ll quickly see if anything is wrong since Discourse give some error message when you save the changes.
5 إعجابات
Great component @Steven
Would be awesome if we could also have H1, H2 and H3
إعجابَين (2)
Can the [color] [/color] be added to this theme component? If it can, then it would be perfect because then one can use the official discourse bbcode+md composer. I’m currently using formatting toolbar + mdcomposer. Sure I can use CSS to hide the extra buttons, but there are places where CSS is not used like in the admin panel or pavilion’s Custom Wizard plugin. The color button is used a lot.
This is what I have with CSS: (which is perfect)
This is what I have without:
إعجاب واحد (1)
My plan is to have a component for people who don’t want to have a plugin. But I’ll make a branch with color bbcode. I’ll try it in a few hours if I have the time. I’ll let you know when it’s ready and how to install
I’ll probably use the time to reorganize the theme component, I prefer a simple tc by default, I’ll use a all-options branch with subscript buttons, a bbcode branch for those who have official bbcode plugin
إعجابَين (2)
Thanks, the subscript/superscript buttons is one of the reasons to keep using md composer which other plugins and theme components lack. The official bbcode has many things included that are not in the formatting toolbar plugin like the [spoiler] [/spoiler]. To have best of both worlds, I think it’s better to keep the discourse bbcode and then add the buttons we need through mdcomposer.
I didn’t think the script buttons were popular, I’ll keep them in the base component.
I’ll do a few branch, a simple one with only some basic formatting buttons, color branch that adds a color bbcode
إعجابَين (2)
Hey guys,
Just wanted to let you know that a new color branch has been added to the md composer. Now you can use the official discourse bbcode plugin + md composer (color branch) + discourse spoiler-alert (blur spoilers). I believe that this is the best combo available for composer buttons on Discourse.
There’s also an idea of adding a color picker using this free library:
https://github.com/Simonwep/pickr
If anyone wants to help and knows how to add a color picker, feel free to help Steven out!
إعجابَين (2)
How would I completely hide or remove some of these buttons? We only need a few of them and I noticed removing a button will not removing the item being still listed (it will still be a blank space with no visible icon).
The best way is to add some css lines in your current theme
I gave these examples for the align buttons, if you want to get rid of them
.align_center_button, .align_right_button, .align_justify_button {
display: none;
}
I can also give you the css code for the specific buttons you want hidden
5 إعجابات
مرحباً ستيفن، مكون رائع. شكراً على المشاركة!
سؤال سريع: هل سيكون من الممكن إضافة بعض الأزرار لإضافة مسافات غير قابلة للكسر (مثل nbsp ; ensp ; emsp؟ ماذا يجب أن أستخدم بدلاً من applySurround؟
يعاني بعض أعضاء مجتمعي من تنسيق المنشورات (خاصة المسافات البادئة) وأعتقد أن هذا سيكون مفيدًا لهم.
شكراً!
نعم، يمكنك بسهولة إضافة بعض الأزرار، وبدلاً من applySurround، أستخدم addText
لدي هذا المثال القديم الذي يمكنك استخدامه
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "br_button",
group: "extras",
icon: "level-down-alt",
perform: e => e.addText('<br>', 'br_text')
});
});
3 إعجابات
شكرا! هذا سيؤدي الغرض!
هممم… لا يبدو أن لديك خطًا يتوسط النص في شريط أدوات تنسيق Discourse ولكن لديك هنا. أفضل شريط أدوات التنسيق لأنه يحتوي على كل شيء آخر وأكثر، ولكني أود أن يكون الخط الذي يتوسط النص خيارًا. ماذا توصي به نظرًا لأن التوافق مشكلة بين هذين؟
يمكنني إضافة زر يتوسطه خط في شريط الأدوات في المكون الإضافي، قد يكون ذلك ذا صلة في المستقبل.
سأفكر في الأمر، ولكن في هذه الأثناء، يمكنك استخدام المكون الإضافي وإضافة هذا المكون: GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer
سيضيف زر يتوسطه خط إلى قائمة الإجراءات المنبثقة، وهو متوافق مع المكون الإضافي
3 إعجابات
لقد قدمت طلب سحب: https://github.com/MonDiscourse/md-composer-extras/pull/10 والذي، ما لم أخطئ في وضع فاصلة أو شيء من هذا القبيل، يجب أن يصلح
لمنع حدوث أخطاء في الاختبارات، أضف مفتاح `pluginId` إلى استدعاء `modifyClass` الخاص بك. سيضمن ذلك تطبيق التعديل مرة واحدة فقط.
إعجابَين (2)