I have the following HTML template:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
Now, in my accompanying js, I am evaluating some text which I want to place in this div before the image.
var stringToPlace = "This is the text for thisDiv";
this.thisDivAttachPoint.innerHTML = stringToPlace;
However, doing this results in:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
</div>
That is, the image is getting lost.
What do I do so that the result is such that the text is "prepended" before the image. That is:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
I also tried:
domConstruct.place(stringToPlace, this.thisDivAttachPoint, "first");
But this gives error as:
parameter 1 is not of type 'Node'
I also tried:
this.thisDivAttachPoint.innerHTML = stringToPlace + this.thisDivAttachPoint.innerHTML;
After doing this, visually it is as expected i.e. text and then the image. However, the onClick:_doSomething on the image is not getting invoked. What am I missing? Inspecting the element shows that onClick:_doSomething is there. But click doesn't do anything. No errors.
This worked.
domConstruct.place(domConstruct.toDom(stringToPlace), this.thisDivAttachPoint, "first");
This results exactly in what I want. Issue was, we need to convert the String to node before using in place.
Dom-Construct Documentation
Related
I have a form with quill text editor.
<quill-editor [modules]="quillConfig" (onEditorCreated)="getEditorInstance($event)"></quill-editor>
I have an image gallery in a modal, which is filled with my images, and I would like that, if I select an image from modal put the img tag after the text in the editor.
This is the code of one image what I want to add:
<div class="news-image-box">
<img src="${image.path}" alt="${image.description}">
<div class="row">
<div class="col-md-9"><p>${image.description}</p></div>
<div class="col-md-3 news-image-credit"><p>${image.credit}</p></div>
</div>
</div>
My problem is that the contenteditable div of Quill (which is the div for my text and it has "ql-editor" css class) is generated, so I can't give a local reference for using #ViewChild... (or I don't know how)
document.getElementsByClassName('ql-editor')[0].innerHTML += imageElement;
I tried to get the content of "ql-editor" div by a sample getElementsByClassname and just added my img tag to it, but the angular throws this error:
core.js:1673 ERROR TypeError: Cannot read property 'emit' of undefined
at Scroll.update (quill.js:4329)
at MutationObserver.<anonymous> (quill.js:7118)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runGuarded (zone.js:151)
at MutationObserver.<anonymous> (zone.js:129)
I works with just a string btw...
document.getElementsByClassName('ql-editor')[0].innerHTML += 'something';
You can go with ngModel, it is clearly mentioned in documentation.
Reference:
ngx-quill git Repo
Example Snippet:
<quill-editor [(ngModel)]="productDetail" [style]="{border: '0px'}"></quill-editor>
If I understand your problem, you want to add a img tag inside your quill-editor.
Modifying the Element.innerHTML property is a good method if you want to do this but is a bit complicated. It exists simplier method to do that like Element.insertBefore() or Element.append().
You can use them like this :
document.getElementsByClassName('ql-editor')[0].append(imageElement);
Or
document.getElementsByClassName('ql-editor')[0].insertBefore(imageElement, null);
If you really want to use the Element.innerHTML, I invite you to see the documentation about this property.
Hope this helps
Edit: Grammar
I want to build some function in JavaScript, that sends text from textarea to a div.
I want it do the following
If the user tries to send html source to a textarea, it will show the
text, and not the actual html source.
For example:
If the user tries to send: <img src='aa.png'>
I want to see in the div the text: <img src='aa.png'>, and don't want to see the actual image: aa.png
Use .innerText or .textContent instead of .innerHTML
eleme.innerText="<img src='aa.png'>"; where eleme is your div
DEMO:
document.getElementById('test1').innerHTML="<img src='aa.png'>";
document.getElementById('test2').innerText="<img src='aa.png'>";
document.getElementById('test3').textContent="<img src='aa.png'>";
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
You can read more for differences between this three commands and others Here
I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?
I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource
$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});
Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.
In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.
I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.
for some reason both methods results are TextNode. It means that browser doesnot parse content of appended string.
for example
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append(code);
on the page I do have content
"<div><p>Some</p> news are <span>here</span></div>"
this
$("#news_details").contents()
shows that string with html source is attached(for some reason unknown to me) as single textnode
but if will type in firebug
var text = $('#news_detaisl').text()
$('#news_details').contents().remove()
$('#news_details').append(text)
and after that, it is parsed and shows in a right way.
user the html()
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").html(code);
Since you haven't asked a question directly I can only assume what you want. Try this and tell me if it helps and if it was what you wanted:
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append($(code));
Oh and $().append and $().html do NOT behave in the same way. $().append adds the input as a new child while $().html either returns the innerHTML of an element or sets it. Depending on whether you set a parameter.
only this code works fine, but such a weird behavior
var content = news.newsDetails(here async ajax request which load html snippet with content); //content is a string with html snippet from server
$("#news_content").append(content);
var value = $(".news_title").text();
$(".news_title").contents().remove();
$(".news_title").append(value);
$(".news_details").css('display','block')
and html snippet
<div class="news_details">
<img class="pointer" src="/static/img/close6.png" alt="close" width='16' height='16'>
<div class="news_head gradient">
<span>{{ item.pub_date|date:"d M Y" }}</span>{{ item.title }}
</div>
<div class="clear"></div>
<div class="news_title">{{ item.full_text }}</div>
i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";
Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.
Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div