HTML Rich-text editing: wrap custom html around selection - javascript

I am using html 5 rich text editing via the jWysiwyg library. I want to be able to surround the selected part of the document with custom HTML, much like how one would highlight text on the document and mark it as bold. There is very limited information on the subject, and I'm not even sure if it's possible. I've also tried to get the raw html selection of the page, but so far I've only been able to get a plain-text version of whatever is highlighted on the screen. Any recommendations would be much appreciated.

After further research, I discovered that the getInternalRange() function in jWysiwyg effectively returns the object generated by document.createRange(). After reviewing the documentation, I was able to locate the surroundContents() method, which meets my needs. An example is provided below. I'm using jQuery, so I will also demonstrate how to use jQuery to generate the html element for you:
var range = document.createRange();
range.surroundContents($('<span style="background-color: red;" />').get(0));
This particular example highlights the selected text in red, however this example can be easily generalized to allow a developer to surround the selection with any number of html elements.

Related

How to copy to clipboard a selected text with styling ang images by using javascript?

When a user selects a part of the page with styled texts and images, it is possible to copy all that content (with images and styles) and paste it to MS Word or to an e-mail client by clicking "Copy" in the context menu.
How is it possible to achieve the same result with javascript?
So far, I have found solutions to copy plain text only or by using the depreciated document.execCommand("copy") command.
Is there a solution that works for all modern browsers, including Firefox?
If such a function cannot be implemented for security reasons or whatever, could someone please explain why exactly? Because users copy content all the time, why it cannot be done with Javascript?
Edit: I'm trying to show a custom popup with a Copy button when user selects some content on the page. That button should be able to copy all the styling of the selected content, not just plain text. Just like the Copy button in the browser context menu or Ctrl+C
As far as I understand, you wanna magically transform HTML, CSS and JavaScript to a text format. This is technically not possible.
Yes, it is possible. I suggest looking at Navigator.clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
You can get the selected HTML Elements, do all kinds of transformation on data and then paste the data in to the clipboard. Multiple formats also supported, such as images, HTML and simple text. Note that if you are going to copy HTML and/or images pasting will not work in simple text editors, only in editors like Word that supports advanced pasting formats.

<code contenteditable="true"> tag VS WYSIWYG editor in order to achieve dynamic multi-color effect

I need to create a web application with a feature
that the user is entering some text to a "text area" and the text need to be dynamically colored with multiple colors, according to some logic, via event that will be raised when the text is changing.something similar to that: Regex101 just more basic (only multiple colors).
Constrains:
I don't want to use external sources or libraries.
no need for compatibility to old browsers.
I am using angular 2 with type script.
Options:
I did a research and (i think) i found 2 ways to achieve that result:
write my own version of WYSIWYG (btw, is that approach can be implemented dynamically?)
use the <code> tag and set contenteditable="true" with multiple spans as it is explained in that marked answer: Multicolor Text Highlighting in a Textarea or Text Input
According to your experience what is the approach that is more suitable for that task?
Or maybe I am missing something and there is a better approach?
I just need guidance in what way to go.

Javascript - Need Simple Code That Does The Very Basic Thing Of WYSWYIG Editor

I need a javascript codes that I can use to get started in making my own wysywig editor, since I could not find any editor that matches my requirements.
What I need is only a piece of codes that does only the following thing to contenteditable element:
wrap/ toggle wrap selected texts with defined tags containing attribute, such as: <span class="someclass"></span>
preserve the text highlighting/ selection while wrapping and unwrapping.
I found out rangy and SimpleMDE, but it has gone too advanced for me to understand. So, I am looking for an alternative with the most basic and simplest codes.

Using rangy with Kendo Editor

I'm trying to make a twitter-like rich-text editor wherein the characters that go over the character limit are highlighted. I saw this question and tried editing it.
I used Kendo UI's Editor and also Tim Down's rangy library. Using Kendo's inline editor, the rangy library works great.
<div contenteditable="true" class="rte"></div>
Although I need it to work when attached to a textarea.
<textarea class="rte" maxlength="50"></textarea>
The rangy library doesn't work on the textarea quite like the inline editor maybe because Kendo uses an iframe for this. The characters that go over the limit are highlighted but the cursor goes back to the start of the content.
Does anyone know how to fix this? Here's a sample I've been working on: http://jsfiddle.net/G4jn7/12/
This is easily fixed: you just need to pass in editor into the rangy.getSelection() call to tell it to get the selection from the iframe's rather than the main document.
Demo: http://jsfiddle.net/G4jn7/13/
In rangy.getSelection(x), x can be any of several things to identify the document to use: a Window, Document, an <iframe> element or a non-iframe element within the document.

How to implement a Rich Text Editor in HTML?

Here is the demo:
http://www.kevinroth.com/rte/demo.htm
when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in
As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:
document.designMode
Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.
From what I can tell, the demo you linked and TinyMCE uses this method.
contenteditable
The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.
Here is a demo of it: http://html5demos.com/contenteditable
Notes
Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
As I say I have done limited research on this, so please help me correct any errors :)
In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. E.g. if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..
Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.

Categories