Using rangy with Kendo Editor - javascript

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.

Related

How to resize SimpleMDE textarea size?

I use SimpleMDE on my website for simplifying the usage of <textarea> as a text editor.
When trying to customize it, I ran into one problem: I don't know how to resize the text editor.
For example, when inspecting the result of the SimpleMDE code on my website, I found out the default height for the text editor is 20rem. I want it to be more than that.
I came up with one solution, but I consider it to be unreliable, since it is a method of my own, not a built-in one. I simply changed the CSS attributes for the CodeMirror class (as it is the container class for the text editor).
As you could probably guess though, I am looking for a built-in way to do this to avoid any problems and have it the intended way. So how do I do this?

Is this possible to run html/css or JavaScript in CKEditor?

I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.

HTML Rich-text editing: wrap custom html around selection

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.

looking for specific WYSIWYG editor functionality. Recommendations?

I'm developing an application that requires very specific WYSIWYG functionality. I need a way to generate HTML consistently and around elements that my application generates. The container used must be a DIV element, there must be a way to block/strip formatting when pasting, and the tags used in the HTML must be consistent between browsers. Also, it is important to have hooks for the backspace key, so that any special elements that I insert into the DIV from my application can be handled appropriately. Anyone have any suggestions? Maybe a good starting point?
Have you looked at tinyMCE?

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