CKEditor insert empty paragraph - dom

In the CKEditor plugin I'm writing, i need to create a new empty paragraph.
I know that empty paragraphs (<p></p>) are collapsed by most browsers, that is why CKEditor has some special handling for them:
When displaying the HTML source, CKEditor displays <p> </p> for an empty paragraph (for example, when you press enter twice)
Depending on the browser, in the editing area CKEditor fills the Paragraph with another placeholder. For example in Mozilla Firefox, it inserts a <br type="_moz" /> into the paragraph.
However, when inserting a p DOM node manually (using the CKEditor dom object), this special handling is omitted. It magically appears when i switch to source view and back edit mode, though.
I've tried:
var new_p = new CKEDITOR.dom.element('p');
editor.insertElement(new_p);
And:
var new_p = new CKEDITOR.dom.element.createFromHtml('<p></p>');
editor.insertElement(new_p);
And also:
editor.insertHtml('<p>');
But the special handling of the empty paragraph does not take place. I get an empty Paragraph, but as the Browser is collapsing it, I can't see or edit its content correctly.
When switching back and forth to the source code view, CKEditor detects the empty paragraph and inserts the filler. Also when submitting the data. But i need the filler to appear immediately when inserting the new node.
How do i get CKEditor to handle my new paragraph like any other empty paragraph it would create when a user hits Enter twice?
I know i could also insert manually as HTML content to the new DOM node, but thats a huge difference - because in this case, the space really appears in the editing area, so when a user enters content into the new paragraph, he must delete the non-breaking space manually.

After researching how CKEditor handles the press of [ENTER] internally, i came to this solution:
var new_node = new CKEDITOR.dom.element( 'p' );
// insert UTF-16 non-breaking space
var dummy = editor.document.createText( '\u00A0' );
dummy.appendTo( new_node );
editor.insertElement(new_node);
// move cursor to beginning of new element
var range = editor.createRange();
range.moveToPosition( new_node, CKEDITOR.POSITION_AFTER_START );
editor.getSelection().selectRanges( [ range ] );

Related

How do I underline some text in a label using ZK framework?

I am using ZK framework. I have a static line of text in a label:
<label
value="If you have already submitted a leave application or need to modify
an existing leave, do not submit an online application. " />
I need to underline only some parts of this sentence. I've tried putting <u> </u> around the text I wish to underline, but this is not allowed in ZK.
I've also tried creating separate labels, with style="text-decoration: underline;" which does underline the specified text. However this way of underlining makes each label display on it's own line.
Is there some way that I can underline only certain parts of my label?
There is no way you could append style to certain parts of a label.
Like #Link already commented you could use multiple labels and set the sclass different of each label.
If you have real HTML in your text, you could use the following :
HtmlNativeComponent n = new HtmlNativeComponent("html", "<h2>title</h2>","<p>your text</p>");
Explication of constructor :
"html" => the element where all your text is between. (wrapper element)
"<h2>title</h2>" => the first part. If you append more children to the native component, its after this they will come.
"<p>your text</p>" => the second part. If you append more children to the native component, its before this they will come.

Programmatically adding content to tinymce

I am trying to use javascript to add text input to a tinyMCE editor,
I can append the text visually using :
tinymce.activeEditor.selection.setContent(' words and stuff ');
have also tried
tinyMCE.activeEditor.selection.setContent(' ');
Which will allow me to see the text specified above no problem, however when i go to save its almost as if the javascript didnt actually append the text where it should have or something, my save is the original text without the text appended above, does anyone have any idea why?
The issue i was having was, I would add text into tinymce with the javascript line
function AddNotes(NoteS) {
tinymce.activeEditor.execCommand('mceInsertContent', false ,NoteS);
}
And for some reason, I needed to insert into the tinymce TWO TIMES for it to work.
So what I did to compensate was added the information that I want to add, and then I throw in a paragraph element which creates a new line under what I just added. I could have added a space, or whatever I want but I chose to add a new line as seen below:
function AddNotes(NoteS) {
tinymce.activeEditor.execCommand('mceInsertContent', false, NoteS);
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<p></p>');
}

Removing newlines when continuing a column on a new page

I am using iTextSharp to generate a PDF on the fly. I am using the ColumnText class in text mode using the ColumnText.SetColumns() method to define column boundaries using code like the following:
myColumnText.SetColumns(leftCoords, rightCoords)
myColumnText.AddText(New Chunk("Lorem ipsum..."))
myColumnText.AddText(Chunk.NEWLINE))
myColumnText.AddText(Chunk.NEWLINE))
myColumnText.AddText(New Chunk("Lorem ipsum..."))
myColumnText.AddText(Chunk.NEWLINE))
myColumnText.AddText(Chunk.NEWLINE))
As you can see, I emit a block of text and then two Chunk.NEWLINEs to add whitespace between paragraphs.
I then use ColumnText.Go to emit the content, creating new pages as needed, like so:
While ColumnText.HasMoreText(myColumnText.Go())
myDocument.NewPage()
myColumnText.SetColumns(leftCoords, rightCoords)
End While
The problem I am running into is that depending on the content in the ColumnText object a page break might occur right at the end of a chunk of text but before the Chunk.NEWLINEs, meaning that the content on the next page starts with two Chunk.NEWLINEs rather than at the top of the page.
Is there a way to somehow suppress Chunk.NEWLINEs if they are the first things emitted on a new page? My thought was that if I could somehow see the text that was about to be emitted by ColumnText.Go I could see if I was about to emit a Chunk.NEWLINE and remove it from the content stream or something...
Thanks

GWT: RichTextArea getHTML loses "outer" tags

Please bear with me as I am a newbie in gwt and front end stuff.
I have a html string:
String s=
"<html><head><title>Hello World</title></head><body><b>Hello World</b></body></html>";
(I am using spaces in the tags to prevent the text from displaying "htmlized".)
//and gwt RichTextArea control->richTextArea
richTextArea.setHTML(s);
//So far so good as the document String displays as desired.
//Now comes the problem...
String transformed = richTextArea.getHTML();
The rich text area strips the outer and returns the inner html only. i.e. The body, html and the head tags are stripped.
Q How do I get the html string returned with only the modifications which occur in the rich text area showing.. i.e. The original "outer" tags do not get lost.
Hope I am adequately clear.
You don't have to set them in setHTML <b>hello world<b/> is enough.
Also if you set the outer tags you can't get them, as they don't add anything in the formatting of the text.

Watin - How to set value of textarea (HTML editor)?

I'm trying to set the value of a textfield using the following code:
if (ie.TextField(Find.ById("testField")).Exists)
ie.TextField(Find.ById("testField")).Value = "Test";
The code passes without raising an error, however the textfield is not filled with the value.
I get an exception when I execute the following line:
ie.TextField(Find.ById("testField")).Focus()
The textarea is a tiny_mce editor and one of the html attributes is: style="display: none;"...
Any ideas how I can modify the value of such a field using Watin?
Thanks.
First tinymce is not a textarea. tinymce hides your textarea on initialization and creates a contenteditable iframe which is then used to allow text editing, styling aso...
Second if you want to write the editors content back to the hidden textarea you may do this using
tinymce.get('testField').triggerSave();.
Another way to set the value of your textarea is:
tinymce.get('testField').getDocumentById('testField').value = 'new value';
In case you want to write content directly to your tinymce editor you may choose on of the following
tinymce.get('testField').setContent('my_new_content'); // replaces the editors content
or
tinymce.get('testField').execCommand('mceInsertContent',false, 'my_content_to_be_added'); // adds the content at the carat postion
Here is a simple way to handle this using the Watin Eval function:
var js = "tinyMCE.get('body').setContent('" + bodyCont + "')";
var s = ie.Eval(js);
'body' needs to replaced with the id of the textarea that is hidden by tinymce - do a "view source" in your browser window to find this id.