I have an app in GWT that provides lots of little paragraphs and let's the user edit them. Right now I just have a view mode, just an HTML paragraph, and an edit mode, for which I use a standard HTML TextArea.
Is there a fluid GWT paragraph editing widget that does not require using a TextArea or switching between modes? Note that I do not need a rich text widget as I don't want bold, italic, bullet points, etc.
I would be willing to use a jQuery or other JavaScript library solution as long as it was really robust and cleanly separated from everything else I'm doing. I don't want to babysit/hack on JavaScript.
Somehow I think this problem is hard, as Google Docs doesn't do it well and even stackoverflow has me using a very TextArea-like box to edit text that is later displayed as an HTML paragraph.
I would use HTML ContentEditable. http://html5demos.com/contenteditable/
<div contenteditable="true">
</div>
You can use a JS framework to bind to changes. I have noticed issues with the JS 'change' event, but the 'blur' event works well.
Related
I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks
I am working on an online rich-text editor, similar to the WordPress page creator, or the Stack Overflow post creator. It has been pointed out that there are two distinct types of online rich-text editors:
WYSIWYG editors, and
HTML editors
I'm building the second type. Unfortunately, neither <textarea> nor using contenteditable are very convenient for HTML rich-text editing.
The problem with <textarea> (as used here in Stack Overflow) is that you can't show text-level semantics in the edit field. You can't just highlight a word and make it bold, you have to insert some kind of markup (e.g. *****bold*****). Not very user friendly and not really "rich" text either.
On the other hand, using contenteditable solves those problems but introduces a problem of control. Browsers will insert all sorts of HTML and CSS to make the edit field look good. If you hit Enter, the browser will insert <p>, or <div>, or <br>, or <div><br></div>... depending on the browser. If you paste in a few paragraphs copied from HTML, you get tons of excessive markup--beyond what was even in the source HTML. For example, the following source code:
<p>This is one paragraph!</p>
<p>This is another.</p>
Shows up on a website as:
This is one paragraph!
This is another.
...which, if you copy and paste into a contenteditable form, can give you something like this:
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is another.</p>
...bringing inline styles with it, and in some cases additional HTML.
I've been trying to figure out how to limit and control the amount of HTML that the browser inserts in a contenteditable element, but I am beginning to think that contenteditable is only suited for WYSIWYG type editing, and will never work for HTML style rich-text editing.
Is there a third alternative, or has anyone built some sort of Javascript editor that meets my needs?
The alternative is to code it all by yourself using click events on normal divs, and so on. There are a lot of things that would need to be done using this approach and there are a lot of questions on stack overflowthat would help, including setting up all event handlers & handling adding a caret when they click on a location in text [1], keypress events for everything including Enter, Backspace, Delete, all alphanumeric keys, and the rest. You would need to create the caret as a visual element when they clicked something, enter text when they typed, delete text when they hit backspace, enter newlines when Enter is pressed, and so on. Google Docs and Online Word probably use this approach, but it is a massive amount of work and I don't know of any open source libraries that implement it, but it would give you full control of everything, including formatting of everything (since you would be entering it all).
[1] Detect which word has been clicked on within a text
Ok im struggling to find anything on this as im probably searching the wrong keywords.
I have a backed form thats use to display content on a page. When entering the details i want to be able to use a basic text editor to style the text, like bold, bullets, underline.
On top of that i would also like to allow them to wrap section in paragraph tabs, apply a certain style i.e style id="x".
Its more for backend so it doesnt have to be really user friendly but if there was an uncomplicated way of showing the styles in the form as i apply them, basically a WYSIWYG view. If not i will settle for applying the styles without having to see all the hmtl and css tags in the editor but when the information is passed via the INSERT query it will show pass all the relevant code like My Style and so on.
Now im quite happy to spend the time learning how to do this if you point me in the right direction but i have no idea what keywords to search. Ideally if there is a script out there i can just edit to my needs would be great too rather than starting from scratch.
Finally since im learning php and mysql still keeping it dumbed down will help and also since my values im passing is going to be full of characters the code wont like what functions should i look up to pass the code and content into the database to avoid breaking the code
I'm not entirely sure what you mean, but it seems you can achieve what you want using an editor like for example TinyMCE in combination with JQuery?
With JQuery you can show/hide items and ander your css like
$("p").mouseover(function () {
$(this).css("color","red");
});
I am new to GWT and am having a hard time finding any good tutorials focused especially on teaching styling with GWT. The few examples I've found provided by Google are rather paltry, and don't really explain much.
Some things I'm trying to do would be:
Change the global font style
Change existing widgets' styling, such as the background color of a
selected item in a CellTree
Replace a button's text with an image instead
Remove borders of text fields
the list goes on
I've been searching and searching, and am not finding anything particularly helpful with styling, so any advice/direction would be greatly appreciated! Thank you!
Styling in GWT is done almost entirely with CSS. You can link an ordinary CSS file to your host html, as you would with a normal website, and its rules will apply just as normal CSS does with normal HTML. GWT provides a couple of ways to optimize your CSS, and that gets pretty complicated, but at a basic level you can just use Firebug to look at the HTML of your app, figure out what CSS you need from that, and throw it in your css file. GWT applies many special styles to the widgets that come built-in, and you can learn all of those style names from the generated HTML and the documentation.
is there a way to force the GWT's RichTextEditor to use custom stylesheet for the edited text?
From what i have seen, it uses an iframe to render the text, so the host documen's styles are ignored.
That's currently not possible (there's an open issue about it).
As a workaround you could manually add your style definitions to the head element of the iframe document. See here for an example.