CKEDITOR.replace() is hiding the textarea that I want converted - javascript

I'm using Javascript to create a textarea that I want to be a ckeditor. My code is something like
var html = '<textarea name="text"></textarea>';
$('#mydiv').append(html);
var textareas = document.getElementsByTagName('textarea');
// Could be more than one textarea
for (i = 0; i<textareas.lenght; i++) {
var textarea = textareas[i];
CKEDITOR.replace(textarea.name);
}
When I run this code and check the output the textarea is hidden. Inspecting it in firebug I'm getting a style="visibilty:hidden". However removing this just gives me a textarea and not a ckeditor. Does anyone have any suggestions on how to solve it.
Putting it as a div worked but the examples all seemed to be in textareas.

The hiding is correct. Because the <textarea/> has no wysiwyg support. The .replace() method replaces the <textarea/> with it's wysiwyg Editor. That's why it's hidden.
CKEDITOR.replace(elementOrIdOrName, config)
Replaces a or a DOM element (DIV) with a CKEditor instance. Source
As you can see in the documentation you don't need to append the <textarea/>, instead you could use your div directly:
CKEDITOR.replace('mydiv')

Related

How can we update displayed text in cml:text or cml:textarea using javascript on crowdflower platform?

I am designing crowdsourcing interface on crowdflower platform, during design, I need cml:text or cml:textarea to accept workers's text input. Here is an example:
<cml:textarea label="my_name" id="my_id" validates="required" default="123456"/>
The default value shown in this text box is "123456", however, it will disappear after user clicking. What if I want to preload some content which can be reused (doesn't disappear) by the workers? I tried the following methods:
document.getElementById('my_id').html() = "678910";
document.getElementById('my_id').innerHTML ="678910";
document.getElementById('my_id').value = "678910";
document.getElementById('my_id').default = "678910";
document.getElementById('my_id').placeholder = "678910";
document.getElementByName('my_name').html() = "678910";
...
None of them works. Is it doable to update text in cml:text or cml:textarea on crowdflower platform?
I ran into this today! It seems that document.getElementById or its alternatives do not work for cml input tags. Here is a workaround using jQuery that worked for me. Put your cml:textarea in a div, then use find to get the inputs inside the parent div.
require(['jquery'], function($) {
var my_element = $("#parent_element_id").find("input")[0]; // first input element in the list
my_element.value = "678910";
});
Hope this helps!

Ace Editor remove my HTML tags

Here's my html:
...<div class="myclass"><label>Default</label></div>
my javascript:
ace.edit(el); // where el is the dom element div.myclass shown above
The editor is rendered properly!
The editor only comes up with "Default". No html to edit.
When I look at the code in debug mode on chrome, I see that the edit function retrieve the value of my element using (line 18474):
value = dom.getInnerText(el);
Which in turn result in:
return el.textContent;
then el innerHTML is blanked using (18475):
el.innerHTML = '';
This seems very strange to me. el.innerHTML correctly displays
"<label>Default</label>"
Is it me or there's something wrong?
How can I edit the html content of a div using Ace editor if this is normal behavior? What am I missing?
Thanks
Found an answer here
https://github.com/ajaxorg/ace/issues/519
I'll try it and let you guys know if this doesn't solve it
You basically need to
el = document.getElementById("editor"); text = el.innerHTML editor = ace.edit(el) editor.session.setValue(text)
Ace uses textContent instead of innerHTML because it's not possible to pass arbitrary text using innerHTML. E.g if you have '<div class="myclass">' innerHTML will make it '<div class="myclass"></div>' and <script>alert('haha')</script> will display alert dialog.
You can use textarea or xmp tag, to not make browser parse the text but there again you need to escape </textarea. So the sanest way is to escape special html characters like < and & and use textContent.
If your code content has HTML use textarea as the container to call on Ace Editor
Atention
On C# and Javascript use innerText a not ~~innerHtml~~.
Example
HTML
<textarea id="aceeditorcontent" runat="server" clientidmode="Static"></textarea>
<script>
var aceeditor = ace.edit("aceeditorcontent", {
theme: "ace/theme/chrome",
mode: "ace/mode/html_ruby",
maxLines: Infinity,
showPrintMargin: false,
wrap: true,
autoScrollEditorIntoView: true,
enableSnippets:true
});
</script>
Csharp
aceeditorcontent.InnerText = "<html>......</html>";
javascript
document.getElementById("aceeditorcontent").innerText = "<html>......</html>";

Bootstrap wysihtml5 editor - can't insert html using JS

I want to insert some HTML (html_string) into the textarea using:
var editorElement = $("#my_textarea").wysihtml5();
var wysihtml5Editor = editorElement.data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("insertHTML", html_string);
However, this only seems to work if I have first clicked on the textarea at least once. Has anyone else seen this? (the JS debugger yields no errors).
Have you tried:
$("#my_textarea").val(html_string);
Alternatively also try after your code:
editorElement.data("wysihtml5").editor = wysihtml5Editor;
Can you make a JSFiddle?

How can I Strip all regular html tags except <a></a>, <img>(attributes inside) and <br> with javascript?

When a user create a message there is a multibox and this multibox is connected to a design panel which lets users change fonts, color, size etc.. When the message is submited the message will be displayed with html tags if the user have changed color, size etc on the font.
Note: I need the design panel, I know its possible to remove it but this is not the case :)
It's a Sharepoint standard, The only solution I have is to use javascript to strip these tags when it displayed. The user should only be able to insert links, images and add linebreaks.
Which means that all html tags should be stripped except <a></a>, <img> and <br> tags.
Its also important that the attributes inside the the <img> tag that wont be removed. It could be isplayed like this:
<img src="/image/Penguins.jpg" alt="Penguins.jpg" style="margin:5px;width:331px;">
How can I accomplish this with javascript?
I used to use this following codebehind C# code which worked perfectly but it would strip all html tags except <br> tag only.
public string Strip(string text)
{
return Regex.Replace(text, #"<(?!br[\x20/>])[^<>]+>", string.Empty);
}
Any kind of help is appreciated alot
Does this do what you want? http://jsfiddle.net/smerny/r7vhd/
$("body").find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
Basically select everything except a, img, br and replace them with their content.
Smerny's answer is working well except that the HTML structure is like:
var s = '<div><div>Link<span> Span</span><li></li></div></div>';
var $s = $(s);
$s.find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
console.log($s.html());
The live code is here: http://jsfiddle.net/btvuut55/1/
This happens when there are more than two wrapper outside (two divs in the example above).
Because jQuery reaches the most outside div first, and its innerHTML, which contains span has been retained.
This answer $('#container').find('*:not(br,a,img)').contents().unwrap() fails to deal with tags with empty content.
A working solution is simple: loop from the most inner element towards outside:
var $elements = $s.find("*").not("a,img,br");
for (var i = $elements.length - 1; i >= 0; i--) {
var e = $elements[i];
$(e).replaceWith(e.innerHTML);
}
The working copy is: http://jsfiddle.net/btvuut55/3/
with jQuery you can find all the elements you don't want - then use unwrap to strip the tags
$('#container').find('*:not(br,a,img)').contents().unwrap()
FIDDLE
I think it would be better to extract to good tags. It is easy to match a few tags than to remove the rest of the element and all html possibilities. Try something like this, I tested it and it works fine:
// the following regex matches the good tags with attrinutes an inner content
var ptt = new RegExp("<(?:img|a|br){1}.*/?>(?:(?:.|\n)*</(?:img|a|br){1}>)?", "g");
var input = "<this string would contain the html input to clean>";
var result = "";
var match = ptt.exec(input);
while (match) {
result += match;
match = ptt.exec(input);
}
// result will contain the clean HTML with only the good tags
console.log(result);

Need Solution on NicEdit Insert HTML text into Instance

i am using this function to insert text into NicEdit,
function insertAtCursor(editor, value){
var editor = nicEditors.findEditor(editor);
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
value +
editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);}
This code works fine for simple text but when i pass HTML content into it, it does not render the HTML output in div instead it dumps the HTML code as it is into the Instance Div.
Example:
<div class="one">Some text here</div>
This must show in the Instance as "Some text here"
and remaining code hidden in source code.
Can any one give me a solution to fix this problem?
After working whole night and trying different solutions I had finally got it working! :)
In case any one wants to know solution for this, I had to add a Replace function
replace()
for the content and made it support HTML.
See my answer HERE. It's a plugin I created to insert html at the cursor position.

Categories