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>');
}
Related
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 ] );
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
I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any
<i> tag from previously inserted content to the db.
Case:
I insert html content to the db, some content contain the <i> elements.
I do this with the CKEditor.
Everything works perfect and the content shows up on the webpage.
But when i want to edit the previously inserted content, the <i> elements are missing.
In my specific case i use:
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
Of course if i disable the editor, the content shows up just fine in the textarea.
When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty
For example, I added the following to the config.js
// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;
Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.
I found the solution for this specific problem i ran into with the <i> tag
The original answer i got from drupal forum
The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);
Thanks to Spasticdonkey for pointing me to the link.
Here is what works for me
add the 3 lines of code below in the same order in the drupal ckeditor profile setting
admin/config/content/ckeditor/edit/Full
ADVANCED OPTIONS >> Custom JavaScript configuration
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
First line is pretty much turning off the advanced filtering
Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.
The last line is for the empty tag...this line works with images...I have found that if you use
config.protectedSource.push(/]*></i>/g);
it strips out the tag while editing.
for 4.3 version ckeditor
in config.js (after config section) paste
CKEDITOR.dtd.$removeEmpty['b'] = false;
and write widget with code
CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],
icons: 'bwcaret',
init: function( editor ) {
editor.widgets.add( 'bwcaret', {
button: 'Create a caret',
template: '<b class="caret"></b>',
allowedContent: 'b(!caret)',
requiredContent: 'b(!caret)',
upcast: function( element ) {
return element.name == 'b' && element.hasClass( 'caret' );
},
});
}
});
There are two possible problems:
Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.
However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.
One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.
i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag
if you are using any icon like font-awesome,maeterlize icon etc ...
you can stop it by using below code in your config.js file
CKEDITOR.dtd.$removeEmpty.span = false;
CKEDITOR.dtd.$removeEmpty.i = false;
if you are using more blank tag then you need to add the tag name after $removeEmpty
CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.
Replace
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
With
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"> </i>
Now <i></i> tag have content i.e. so CKEditor will not remove that tag.
I have a textareaField in Silverstripe Backend in Edit Page View... The text to insert contains linebreaks. If I save the Page the text shows correctly with linebreaks in the textareaField. The linebreaks are for sure saved correctly to the database. But how do I display the text correctly in the frontend? It´s always outputted without linebreaks in a single line.
I tried already $Text.RAW, $Text.XML,... nothing works.
Thanks for the help,
Kind regards,
Florian
Assuming that you are using 3.0 this is a bug. You can see it here http://open.silverstripe.org/ticket/7596
A work around is to write your own function calling nl2br on your text field.
Here is an example:
public function NiceDescription () {
return (nl2br (Convert::raw2xml ($this->Description), true));
}
You can replace "Description" with the name of your text property.
Then in your template file if you need to display the description field you will call the function:
$NiceDescription
to visually render the newlines in html, you need to convert them to <BR> tags.
see http://php.net/manual/de/function.nl2br.php
I have a page where I add textareas to the DOM with javascript and I would like them to have a TinyMCE editor attached.
When I add the first textarea everything is fine.The problems occurs with the next ones added.
It looks something like this:
http://dl.dropbox.com/u/1918752/tinymce_problem.png
In the firebug console, there's an "d is undefined" error thrown.
I'm using
tinyMCE.execCommand("mceAddControl", false, 'textarea_id');
to add TinyMCE control to the newly inserted textarea.
I'm using TinyMCE version 3.0.1 and unfortunately upgrading isn't really an option now.
Later edit:
The function I use to insert textareas:
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g");
var reg = new RegExp("child_", "g");
$(link).up().previous('ul').insert(content.replace(regexp, new_id).replace(reg, "child_"+new_id));
if($('estore_products_category_children_attributes_'+new_id+'_description')) {
tinyMCE.execCommand("mceAddControl", false, 'estore_products_category_children_attributes_'+new_id+'_description');
}
}
The content parameter is where the textarea is.
This is used in a rails application, and I created a helper which returns a standard chunk of html based on the types of associations used, and then I replace the generic ID's with new unique ones and insert in into the DOM.
I think you did not shut down tinymce correctly in order to recreat an edito instance with the same id!
To shut down an editor instance correctly use:
tinyMCE.execCommand("mceRemoveControl", false, 'textarea_id');
This is necessary when you move the editor around inside the dom or when you remove parts of the dom containing the editor iframe.