I need some assistance while working with a rich text editor (specifically the Dojo Editor dijit), but this question should apply to all RTE's.
I am seeking a way (via HTML/JS/etc, whatever works in a text editor..) to combine some text and an image, in such a way that they can be manipulated as 1 entity. So I should be able to, for instance, select the entity as a whole, and cut/paste it elsewhere in the textbox, or delete it with a single key press, etc.
I am not sure what features text editors do and don't support, but is there a feature that is equivalent to a container/wrapper/textbox, which combines the text and image into 1 single entity?
Thanks
First save image, and then add text on the image using photo editing software or word art or microsoft powerpoint. (You can try whatever.) Then save the image again with the text. Then you can use the image and text whole as a single entity. But the issue is you can't change the text dynamically on your webpage. It will become static.
Related
I rendered a lot of spans, which contain emojis with JavaScript through an API. I want that if you click one span/emoji, it copies to clipboard. How can I accomplish this? Do I need to give them all an ID?
Emojis
I'm using an image annotation tool for a website I'm working on, and I need to type text onto the canvas using the paper.js PointText object. That part is pretty easy. I'd also like to be able to type with a visible cursor, and edit, create/change multiple lines, save it, and edit it again.
It's the part with typing with a cursor and editing in the middle of it that I'm wondering if it is even possible. Right now, I can type and delete letters, but only at the end of the text I've already created. I want to edit in the middle without deleting anything.
I'm not posting much code because my question is theoretical, and I haven't been able to find any code to try, except for the jQuery attribute contentEditable.
$(text).attr('contentEditable');
where text is a paper.PointText(position) object at position event.point.
Thanks!
You can try placing a contenteditable div over the canvas when you click on the PointText.
Here's an example:
http://jsfiddle.net/maitreyjukar/jz9Lu7wf/3/
Currently paper.js does not support word-wrap for PointText. They might provide support for it in AreaText which, hopefully, should be available shortly.
I have a text document which is in image format (PNG FILE). I want to manually highlight each sentence in that image programmatically using javascript/css. I want to use this technique on web page. Is there any idea to do that?
You would need to do some server-side processing with OCR to detect the location within the image where sentences start/end. Once you know that, you could use javascript and CSS to place styled divs over the image.
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.
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."