JS text editor control with flexible dynamic visual styling capabilities - javascript

I'm looking for a JS text editor control for any sane framework, that would allow me to color and otherwise style text in run-time as user types it in a custom markdownesque format.
Note that the actual format is quite different from Markdown, so I can't simply reuse some existing Markdown editor. Also, the purpose of this stuff is to help user with semi-structured data input, not fancy text formatting by itself.
In addition to styling text, I would like to be able to dynamically insert UI elements (say, buttons) in the text, again, depending on what user typed in.
I must also be able to send changes to the server-side in background, in some more-or-less effective way. I think that I would need to write some custom callbacks there anyway, but it would be cool if a control would provide a comfortable framework for that (or at least if it would not stand in my way).
Support for the usual features like undo/redo and copy/paste is, of course, a must.
A silly synthetic example to clarify what rules I want to be able to code:
The text:
-- Foo
Bar {green}
*Baz*
-- Alpha {red}
Styles:
From line with Foo to line before Alpha: background color is green.
Line with Alpha: red background
Word *Baz* (along with asterisks) is in bold.
Next to words Foo and Alpha: buttons with a trash can image, if pressed delete whole section of text from current -- to the next one.
When user presses Return on line with --, cursor position on the next line is auto-indented.
If user types -- at the beginning of (indented) line, new section is started and line is unindented. (Actual indentation characters /spaces/ must appear in the text.)
Note that I want these visual styles to be applied in the editor as user types. If, in the example, user changes {green} to {blue}, background color should be changed accordingly.

Check out the Yahoo Rich Text Editor. It's open source.

Related

OnSelectionChanged Need More Of An OnStyleChange - JavaScript

I am building a simple WYSIWYG editor, many out there are way to complex to integrate, or does not give the user good feedback.
I can do what I want with the OnSelectionChanged event, but that seems to be too wide of a net, the event fires more often than I want/need. What I would like is an event that fires if say the font changed, or bold changed at the current cursor location.
for example, if I have a line of text "this has a BOLD in the lin^e" and the cursor is at the '^', then click or move the cursor towards the word Bold, I do not need the event to fire until it hits the word that is bolded, or other change (text color, size, style...).
Currently, in the event code, it calls the queryCommandState, and looks to see what parts of the toolbar buttons become highlighted, in this example the "B" gets highlighted, when it hits Bold, just like a normal text editor, like Word.
My concern with the round trip time, looking for a couple of things is not bad, but when I look at all the formatting, (bold, underline, size, color, style...) it starts to add up. I thought about putting an escape hatch in, but it still needs to go through and look at what is the current values and then compare it to the last state, so I do not gain anything.
Is there a better event option than the one i am using, such as some kind of stylechanged event, or an event that fire when it sees a tag change.
Thanks,
Dave
I think that you should revisit your premise that integrating a wysiwyg editor is way too complex and that building one is a reasonable alternative.
I've included one js file from a cdn and added this single line of javascript to transform a textarea into a rich text editor, with nice visual feedback regarding formatting options.
CKEDITOR.replace('editor1');
https://codepen.io/anon/pen/GyWGvY

Multiple independent sections in one textarea

I want to make a kind of form that has one big textarea but divided on smallers ones, to put it simple I would like to create something like this:
Section 1
Text text text
--------------
Section 2
text text text
--------------
Section 3
text text text
--------------
etc.
And make it all in one textarea BUT when I click in section 1 area file_1 would load (and I ofc could edit the text in that particular section) and when I click section 2 the file_2 would load (names are just examples).
If it's impossible or really complicated to make what would be best approach to this problem? Keep in mind that there would be at least 20--30 sections and they should be created dynamically.
I was thinking if it is possible to make it in HTML/CSS/Javascript.
You can do that, but I do not really see the point. The way to do it is to always use white space separators and not allow the user to add such separators or remove them. Then, you can get the different sections by split-ing the value of your textarea by the separator and initialize them by loading the file into an array and join-ing it.
But why would you want to overcomplicate your own life this way and to force yourself to implement slow and hacky algorithms? You could use several textarea tags and design them in such a way that they will look like they are a single textarea. The only thing to handle besides that would be to switch the textarea when the user presses down/up arrow for instance in the last/first row of a textarea.

Markdown editor with live formatting

I want to create an online markdown editor that has limited wysiwyg formatting. If you're familiar with iA Writer, I'm trying to create an editor similar to their desktop version. For the most part it's just a simple text editor, but it does a few snazzy things that I'm trying to duplicate.
Automatically underline/bolds thing in *italics*, **bold**, ***bold italics***
Indents ">" blockquotes
Outdents "#" headers and "-" lists so that the text is left aligned, much like on the old three hole punched line paper you could align the text to the red line and put list numbers to the left of it.
I have a few thoughts about how to go about implementing this but I've run into some concerns with each of them.
Editable iFrame
How do I outdent text or apply a css class to it
The formatting happens automatically, so how would I change the selection of the text, reformat it and then go back to the original selection location
I hear that you can load another page into your editable iFrame to do more advanced features, but I'm not too familiar with that - any good resources?
Pure javavascript
How do I create a blinking cursor in an area because I don't think I'll be able to do this in a input or textarea...
Possibly make every line a div that converts into an input box when I click on it (similar to how the tags box works on the tags box when you ask a question (though doesn't work for inline formatting)
Any suggestions to how I might go about doing something like this?
A good start would be to look at Code Mirror (http://codemirror.net/) whom already provides Markdown Editor and a Strong API.
You should be able to add features and live rendering on top of it.

How to simulate an artificial caret in a textarea?

What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.
I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.
I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.
I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.
I hope I make sense, thanks for any help.
have you seen this?
https://github.com/benjamn/kix-standalone/
This is how google docs does it:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
You could mimic a caret with a special character and do the regex to insert the partner text and move his caret, and you can use the real one. This is the simplest design I can think.
To get the idead, you could use the pipe | as a artificial caret. but this would easily conflict with user insert a pipe, to avoid this you can use sort of uncommon combination, or find some unicode character to act as a caret.
A real solution but way more complicated is not use a textarea, and use a DIV. this means that you need to handle all the key events and insert the character pressed manually to the document, and register the cursor position. But this way you can insert how many carets you want not just 2, something like this <span class="caret1"></span> you can make it blink, style with css, have diferent color for each caret, etc.
Have you tried Draft.js, from facebook ? https://facebook.github.io/draft-js/
"Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface."

Javascript/jQuery legend widget

Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by "■".charCodeAt(0) is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.

Categories