Comments (52)
Basecamp: "We made a simple HTML5 text editor."
Everyone: "Give me the 1,000 features in all other editors that made me want to switch to Trix in the first place."
from trix.
I'd love to see some autocomplete features built-in, so you can do @-mentions as well as emoji expansion. The GitHub editor does well on this, and it's immensely useful!
from trix.
I would love to see some autocomplete built-in for @mentions, now I use https://github.com/yuku-t/jquery-textcomplete for that and have problems when pressing ENTER!
Thanks for the example code of adding underline button and attribute.
But I do not know how I can add a custom action for e.g. adding emojis .. :(
from trix.
Tables seem pretty much imperative to allowing this for use outside of a basic comment form.
from trix.
Only thing keeping me from using trix right now is the inability of styling text (font, text color & background color).
For me, it's the most basic unimplemented need that's on the roadmap list.
from trix.
Would love the ability to add your own custom styling elements.
You can sort of do it by modifying Trix.config.blockAttributes
and Trix.config.textAttributes
, but the thing that is limiting me at the moment is not being able to add a class to the elements you add. You're able create a custom element that will wrap things in <bubble>
tags (for instance), but you can't do something like <p class="bubble"></p>
because Trix doesn't consider the class attribute.
from trix.
Markdown and textile are appropriate for minimal formatting (comment box), but if you want to use this for documentation, they're just not rich enough. Tables are imperative for myself, as are the full suite of font formats. React integration would be amazing and [ ]
checkboxes are a nice to have.
from trix.
@adammiribyan, Trix 0.9.6 changed toolbar button attributes from data-attribute
to data-trix-attribute
. http://codepen.io/javan/pen/EPqzZo now reflects this change.
from trix.
@jeremy I'm against all of the above, purely because it makes implementing this #35 more difficult. Except for the underline part, markdown can do that.
from trix.
More font attributes? Size, face, color …
Depends if you want to give users control over styling. IMHO they shouldn't be given that amount of control - content and style should always be separate.
from trix.
Support for headers? Just one or two levels would be great.
from trix.
@ollym would it be possible to just not allow that though if in a different mode? Something like rules that got applied to certain edit modes. I do see how this could get tedious though. Would be nice though to have a rich text editor with Trix.
from trix.
It would be great to see some support for right-to-left languages. Even better: some support for the use of RTL words alongside LTR ones in a line.
from trix.
I have an unfortunate feature request: being able to import, preferably via copy & paste, content from a Word document which would then be formatted into the equivalent structures in trix.
from trix.
@fusion2004 Have you tried copy+pasting from Word? If so, what does or doesn't work?
from trix.
@javan I haven't tested extensively, but a quick test shows that lists are not being formatted correctly when you paste them in. They seem to be pasting over as just text with mid-dot and circle characters and spaces, as opposed to translating into actual lists.
The first two screenshots are the source document, the second two are the resulting formatting in trix: http://imgur.com/a/RDDoX
from trix.
@fusion2004 one needs to do a lot of cleanup / normalization of the markup that you get from word. I guess this is probably best done as an explicit action with a filtering process even though it would be nice if it happened magically. (for reference take a peek at all the terrible things ckeditor does for paste from word functionality: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/pastefromword/filter/default.js)
from trix.
First off just wanna say this editor is awesome! I'm impressed by all that it does already. Some cool features I'd like to see:
- I'll throw my hat in the ring for headers
- Once an attachment is pasted into the editor, it would be awesome to be able to drag it around, e.g. dragging an image from below to above a paragraph (right now I have to cut and paste it which is a decent workaround but might be difficult for users to figure out)
- Some kind of handler/hook for "the user just pasted something" (e.g. medium js has a
pasteEventHandler
). I would use that to do things like e.g. replace a link the user pasted with an embedly iframe if it looks like something that might be an embed (like a youtube link) - Ability to customize the toolbar to add my own extensions for headers and an "add an image" button before y'all get to it on the roadmap. Right now I'm hacking around inside
Trix.config.toolbar.content
with jQuery, maybe there is a better way already?
p.s. @ollym i got a decent trix html to markdown reverse thing going pretty quickly using https://github.com/domchristie/to-markdown and a little bit of post-processing (e.g. unwrapping <figure>
tags and removing <figcaption>
tags which make images look a little weird in markdown). I'd be happy to share my code with you (it's pretty simple though admittedly a bit hacky feeling).
from trix.
@a-warner yea there are a load of html -> markdown processors but it's just not quite the real thing. Been looking for a simple markdown / html wysiwyg editor that just does html markup for a while. The main problem is wysiwyg products rapidly integrate styling which isn't markup, so supporting markdown becomes a bit of a 3rd party citizen in itself.
EDIT I really hope trix doesn't go down the same road
from trix.
Would love the ability to insert check boxes in the editor. Check boxes plus the existing strike-through formatting enable you to have a very cheap to do list solution. Similar to what Evernote provides, for example.
from trix.
Wrap text intro
tags, so I can use pseudo-classes/elements as :first-child, :last-child, ::first-letter, ::first-line
from trix.
Code editing: represent code as nested blocks according to user preferences.
Showing code as html instead of textarea allows much richer visual hinting, e.g. font size, shadows, borders, images etc.
Converting code to a more visual format allows you to see it according to your own preferences without having to reformat the actual code (and suffering the git merge mishaps).
You could even show and write javascript much like coffeescript by automatically adding parens etc depending on indent level. Take any js code and edit it while it looks like coffeescript…
from trix.
Once an attachment is pasted into the editor, it would be awesome to be able to drag it around, e.g. dragging an image from below to above a paragraph (right now I have to cut and paste it which is a decent workaround but might be difficult for users to figure out)
@a-warner, this is fixed in 0.9.1. (the fix: af1dd1f)
from trix.
@javan awesome! can't wait to try it out
from trix.
Some kind of handler/hook for "the user just pasted something" (e.g. medium js has a pasteEventHandler). I would use that to do things like e.g. replace a link the user pasted with an embedly iframe if it looks like something that might be an embed (like a youtube link)
@a-warner, Trix does dispatch a trix-paste
event that includes the range and pasted data: https://github.com/basecamp/trix/blob/master/src/trix/controllers/editor_controller.coffee#L183. Scan https://github.com/basecamp/trix/blob/master/src/trix/controllers/input_controller.coffee for @delegate?.inputControllerDidPaste(pasteData)
to get sense of what data is passed along.
It's undocumented at the moment because we're still feeling it out. Feel free to report back.
from trix.
Markdown support would be cool, but I hope Trix also can support BBCode in the future. Please take a look at SCEditor, I like how you create your own plugins:
http://www.sceditor.com/documentation/custom-plugins/
from trix.
I would like to add another vote for the ability to attach/embed arbitrary HTML code (or to document it if it already exists), my two use cases would be :
- adding dates/times with a small widget that allows the user to click to drop down a time/date selector, and
- adding a codemirror block for fully-equiped code editing/display
Thanks for a great editor.
from trix.
@ollym @a-warner @MadSpindel
Checkout this WYSIWYG markdown editor: http://hectorguo.com/CKEditor-Markdown-Plugin/
It is a addon for the CKEditor, see this answer on stackoverflow.
from trix.
@mkurz that's actually quite cool. Would much prefer an inline toolbar like the one trix provides, and also as a framework trix seems a lot lighter than CKEditor.
A markdown editor is rapidly approaching our roadmap, so we might make a start at developing this as a trix plugin, if that's even possible !?
from trix.
Integration with other frameworks? Angular/React/…
I wrote an angularjs directive for trix editor. https://github.com/sachinchoolur/angular-trix
If anybody is interested they can use it till the time of official release.
Great work btw :)
from trix.
Guys, great work & thanks for this.
Have to ask though - am I the only one very surprised that underlining is not supported?
(All the more surprising as hypertext links are underlined)
If this is true, can we have a timescale please when this is might be implemented. Thanks.
from trix.
@tomcon Personally, I find underlined text confusing when it's not a link because that style is generally used for links on the web. You can add a button in your app if you'd like though:
Trix.config.textAttributes.underline = {
style: { "textDecoration": "underline" },
inheritable: true
}
buttonHTML = "<button type=\"button\" class=\"underline\" data-attribute=\"underline\" title=\"underline\">Underline</button>"
groupElement = Trix.config.toolbar.content.querySelector(".text_tools")
groupElement.insertAdjacentHTML("beforeend", buttonHTML)
The toolbar configuration API is getting an overhaul in #143, FYI.
from trix.
Closing this issue because it's not maintainable as a mega thread. An API for adding additional formatting styles and customizing the toolbar is coming in #143 so please direct any related discussion there. Thanks for your feedback everyone!
from trix.
Yea, I was surprised with your approach of closing all separate tickets and redirecting everything here. Maybe a better approach would be to create a milestone or a label, and put various tickets under that.
from trix.
@mitar The issues are mostly labeled now and we're working towards a 1.0 milestone (not a complete feature list yet).
from trix.
Thanks for the underline tip @javan that's now working.
Only problem is there is nothing on the toolbar button and I've tried to set background-image, etc but no joy - can you point me in the right direction or to information on how to set this please?
Thanks
from trix.
@tomcon #133 has some examples for adding toolbar buttons.
from trix.
Thanks Javan
On 19 January 2016 at 15:43, Javan Makhmali [email protected]
wrote:
@tomcon https://github.com/tomcon #133
#133 has some examples for
adding toolbar buttons.—
Reply to this email directly or view it on GitHub
#31 (comment).
from trix.
@jabbett ❤️
from trix.
Yes, I can now see the argument for not providing underline support makes sense. Basic styling of text as per @adamtal3 is, as he says, a pretty basic need though.
Can this not be implemented without losing the lovely simplicity? Seems it should be able to be.
from trix.
Here's an example of adding a custom underline button / attribute: http://codepen.io/javan/pen/EPqzZo. The same technique can be used to add any style like color, font, etc.
from trix.
@javan Hi Javan, is this still relevant? It used to work fine in the app and suddenly nothing happens when the user clicks on the underline
toolbar button I've added using the code you posted above.
Trix.config.textAttributes.underline = {
style: { "textDecoration": "underline" },
inheritable: true
}
from trix.
I opened #284 for mentions. To be able to discuss it there and find some workaround to support it.
from trix.
You can attach an image and save it. Between the text.
from trix.
Hi all, first off thanks for the great work.
Reading #78 I didn't quite get why support for header tags was abruptly dropped. Anything specific?
Willing to contribute work on the feature :)
from trix.
@javan in your Codepen examples for underlined text, it seems like the initial value should be underlined, but it's being rendered with the wrapping span and underline style stripped out in both the editor and the hidden input.
from trix.
@mattclough1 are you seeing something other than this?
from trix.
@javan this is what I see without changing anything
from trix.
@javan I've been looking at it in Chrome. Seems to work in Safari and Firefox actually...
from trix.
@javan think I got it. In Chrome window.getComputedStyle(...).textDecoration
returns all possible textDecoration properties. You have to use textDecorationLine
. Good lord that took too long to figure out.
from trix.
👏
from trix.
Tables yes?
from trix.
Related Issues (20)
- Backport CVE-2024-34341 to trix v1 HOT 8
- Is there a way to reinitialize the instance of trix? HOT 1
- Ability to convert an image file before upload HOT 11
- Deprecation of DefaultProps HOT 3
- Version 2.1.1 is removing the img from previews HOT 4
- Support for embedded attachments with expiring url? HOT 2
- Problems with trix sanitization HOT 1
- 在块级元素上设置class或style属,插入编辑器中无效
- Function getClientRectAtPosition produces incorrect results
- Autofocus can not be disabled in Node/ExpressJS and EJS
- Issue with rails hotwire trix textarea resize
- Trix Text Display challenge
- How to insert text into editor after menu button is clicked?
- Uncaught TypeError: element.editor is undefined
- Upload to Active Storage when paste images with CTRL + V HOT 1
- Code samples in official documentation work for 1.3.1 but not for 2.1.3
- How to clone Trix default link button, so I have modal and insert text into editor?
- Inconsistent breaks when pasting content with format due to CSS margin setting
- When using the Trix editor with Rails' Turbo Frames, attempting to insert/edit any hyperlinks after the first doesn't render the link properly
- Trix no longer adds dataset attributes on inserted attachments in 2.1.4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from trix.