We Keep Coding

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!

How do you insert HTML into a QuillJS?

Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything.
If it's not possible, can I at least convert HTML into a Quill Delta?
The reason I need this is because I am grabbing the raw HTML of the text taken from Quill, so I can view it later in HTML style. Have I been doing everything wrong, and need to keep a Delta version of it as well?

On version 1.3.6,
You can use Quill.setContents(value) method.
And insert your new HTML like this:
const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)
quill.setContents(delta, 'silent')
Quill documentation: https://quilljs.com/docs/api/#setcontents

I have found a way, looking extremely closely at the documentation. Method quill.clipboard.dangerouslyPasteHTML('raw html'); does the trick. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

Another way to insert HTML into Quill is by using vanilla JavaScript.
You can set your html to a variable, such as htmlToInsert.
Then target the contenteditable div created by Quill, by getting it by its class, ql-editor.
Finally, set the innerHTML of that div to the HTML you want to insert.
For example:
var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert

There is better way to do this:
const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup

I believe the most straight forward way is this:
quill.root.innerHTML = '<p>HTML Goes Here</p>'
You can also obtain the HTML from this property as well.

If you aren't getting the desired output. It could be because your html content is encoded.
Use this to convert it.
let realHTML = $('<textarea />').html("<p><strong>Hello</strong></p><p><br></p>").text();
console.log(realHTML);
This code will output
<p><strong>Hello</strong></p>
After this you can use this command to set the html content in quill editor
quill.root.innerHTML = realHTML;
or even this:
let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');
Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.

Just to add to #user1993629's answer, using quill.clipboard.dangerouslyPasteHtml(0, "raw html") will place the cursor at the end of the pasted content

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.

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

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')

Changing content CSS on the run in TinyMCE or CKEditor

I have a form in which I want to edit a HTML template. It has 2 textareas, one for the HTML and another one for the CSS.
I'd like to use either TinyMCE or CKEditor for the HTML textarea.
Is there any way to change the content CSS in either of them to match the CSS in the CSS textarea on the run, so when I change the CSS it is automatically loaded into the editor?
Thanks.

I have no experience with CKEditor, but i know that it is possible with TinyMce. What you need to do is to write an own plugin which will provide the necessary functionality.
OnNodeChange in the 2nd textarea (the one with your css) you need to update the head of the first editors iframe. This code snippet to be executed on a special action (for example onNodeChange) should point you into the right direction:
var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)
iframe_id = tinymce.editors[0].id+'_ifr';
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
if (DEBUG) console.log('length of h is null');
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = css_code;
}
else {
newStyleSheet.appendChild(document.createTextNode(css_code));
newStyleSheet.innerHTML=css_code;
}
}
Be aware that this code will add a new style sheet everytime it is called - yielding in increasing the editor iframes head. So i think best practice is to clean up the last inserted style before appliing the new one. Removing the last Node of the head shozld be sufficient.