As a project, I want to try programming my own WYSIWYG editor (kind of similar to https://github.com/yabwe/medium-editor ) or at least be able to edit the already created medium-like editor to include my own functionalities. Can someone give me guidance on editing the yabwe medium-editor to include my own functionalities? Which classes would I edit to include/delete a function. If I wanted to program my own editor, how do I get the editor to pop up when I highlight some text. Thank you!
What you need primarily is a div with contenteditable attribute. You can set data inside it using dangerouslysethtml prop in react or setinnerhtml in normal javascript. You will be able to type inside it, and use onChanged event to capture the changes inside the div and make the text styles inside this function
document.getElementById("inner").innerHTML = "Paragraph changed!";
#inner{background:yellow}
<!DOCTYPE html>
<html>
<body>
<div class="outer" contenteditable="true">This is a paragraph. <span id="inner"></span> Try to change this text.</div>
</body>
</html>
Related
I am using Javascript to input an embed tag to my HTML to display a pdf. The object takes up space but doesn't display anything and is essentially invisible. I tried putting it inside an object tag as well but it doesn't work.
// Invisible
var pdfObj = document.createElement("embed");
pdfObj.setAttribute("src", "./test.pdf");
content?.appendChild(pdfObj);
The pdf file does exist and when I simply put this code in the HTML it displays fine but doesn't when I use javascript.
// works fine
<div class="content" id="main_div">
<embed src="../test.pdf" width="500" height="375" />
</div>
Here is how it shows on the HTML when I use Javascript:
Embed Screenshot
Thanks!
Firstly, welcome to Stackoverflow. You need to make clear pathway in javascript.
`pdfObj.setAttribute("src", "./test.pdf");` this is your code.
`pdfObj.setAttribute("src", "../test.pdf");` this is what it needs to be.
and
try firstly create the element. You just gave a name to document.createElement("embed"). So firstly create it then setAttribute. After that it will work
If this won't work let me hear. I will help as possible as i can
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 am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
Learning from http://dojotoolkit.org/reference-guide/1.9/dijit/Dialog.html, I know how to create dijit/Dialog widget programmatically and dynamically. But now I need to update the implementation of a form within our application which has many inputs. I want to create a dijit/Dialog for the specific DIV, and hope its div elements will be this dialog's elements. How is it possible?
Please try the following code. This code, will remove your div node from it's parent. div will be moved into body tag.
dojo.require("dijit.Dialog");
var myDialog=new dijit.Dialog(
{
title:"Dialog Title",
content:dojo.byId("divNodeID")
}
);
myDialog.show();
Hope this helps you. Thanks!
If you surround your with the HTML that will create a Dialog, it should work.
For example, if your code is:
<form>
... some HTML ...
</form>
then consider coding:
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="MyTitle">
<form>
... some HTML ...
</form>
</div>
I have a 'preview' written in JQuery, which when I write in a textarea, it is written in HTML so that I can see what the output will look like before submitting a post.
One problem though, is that while the main behaviour I want is for the preview to be written in HTML (so that i can see images in real-time), I need to configure it so any text written in the textarea, within <'code'> tags, should be written as text, instead of HTML.
Can this be done?
Thanks in advance guys!
To give an example:
This is text, displayed as text. The following image is nice: <img src="" />
Below is the code to display this image:
<code><img src="" /></code>
Once you create the preview, you could just run this to replace the HTML inside of the code tags with text, like this:
$("#preview code").each(function() { $(this).text($(this).html()); });