Add View Source Code Button - javascript

Is there any way to add view source code button to quilljs editor?
I looked into the documentation and no explanation for this or should be developed by the developer.
Any help will be appreciated.
Thanks

I haven't extensively looked at the api but I think you are best off rolling your own button. It seems quill.js allows you to add your own custom toolbars to the documentation. I would look at this page to do that. http://quilljs.com/docs/modules/toolbar/
You can add an on click on the button that simply gets the editor's html and puts it in an element using this. var html = editor.getHTML(); http://quilljs.com/docs/api/#quillprototypegethtml
Sorry to be brief, but if you need more info on how you can comment below.

Related

How to add a popover link on tumblr

I'm a new user to Tumblr and I see other people with links to their blogs commented on their posts. I know how to use HTML to add and edit the link, but how do I include the popover feature that appears when you hover over a blog link?
Is there a built in way to do it via the post editor, do I need to edit my template, or is there something else I'm missing?
I have tried googling it and inspecting the page, but have had no luck. Could someone please point me in the right direction or show me the code for how to do this?
Thank you for your time.
It turns out all I need to do is just add a link that's an actual blog.

How to filter in CKEditor?

How are you guys doing?
I am recently doing applying CKEditor to my corp's editor.
It's been great though I've got stuck in some problem.
I expect it to be the best even when we paste other contents from web or Word, but What blocks me doing is something kind of inline style tag, such as 'p style....' since it won't take its style away that my viewer doesn't seem to keep the same form.
I found out that filter.js would be the perfect solution for it. But there doesn't seem to be any way I can handle in my IDE since it doesn't exist.
How can I find a file called 'filter.js' or other plug-in so that I can handle the other way. this is the URL which would be help.
http://docs.ckeditor.com/source/filter.html#CKEDITOR-filter
Thanks.
Do I have to make new file called filter.js so I can edit on my own.
So confused. Hope to get some nice solution to it. Thanks.
CKEditor has a robust content filtering system called ACF (Advanced Content Filter). Read more about it here: http://docs.ckeditor.com/#!/guide/dev_acf and see the samples here: http://sdk.ckeditor.com/samples/acf.html. It's highly flexible so you can customize it to your needs.

Open Javascript code in editor on click

I am trying to create an interactive tutorial for learning an API. I've been googling my options for an entire day now. I came across ace, code mirror etc. but I'm not sure how I can use them in my case.
What I wish to do is that when the user clicks a button, a javascript code linked to it should open up in an editor on the same webpage. This would aid the users to see how the code is working and give them scope to modify and learn.
I know its not a constructive question but any help is appreciated! Thanks!
you can just wantch here how it is done
They made it with knockout MVVM but you can use angular or anything else you like.
I used tags to store my code and displayed it using codemirror's setValue property mentioned by #georg.

How to get line bookmark event in ace online code editor?

I just started with Ace online code editor and it looks very powerful and easily customizable. I am using the editor as a syntax highlighter on my website. I wanted to implement line bookmarking functionality like Github Gists on my editor. And since github uses Ace editor, I think it will be possible. But there are lots of api and events in Ace editor and I am confused which one to use.
If somebody has already implemented the above mentioned feature then please help me out with the api and events needed to implement it.
Thanks in advance.
I used this:
editor.on("guttermousedown", function(e){
console.log(e.getDocumentPosition().row);
})
The first line detects every mousedown event that occurs on the "line number" section of the text editor.
e.getDocumentPosition.row detects the row of the mousedown, that matches the number of the line that you've clicked.
That way, you can use other ace actions to what you want with the line you selected.
Okay, I think I figured it out. There is a event 'guttermousedown' which captures the event when the user clicks on the line numbers. Check this github issue
I'm use Vue.js
editor.on("mousedown", function(e) {
console.log(e.getDocumentPosition().row);
});

How to live-style an user input using javascript/jquery

im searching for a libary or suggestions for making a real time styler in javascript/jquery. The idea is that my users have a html text input, i need to detect in real time some patterns and apply an style to it, for example is the user writes #some_text all after the # should be considered like a tag a have to be bold like #some_text.
Im very new at javascript so i have no idea of where to begin, i did some research but i didn't find any already made libary. Thanks for any help and suggestions!
What about something like jQuery Tagit?
You could initialize it like this:
<script>
$(function() {
var availableTags = [
"#some_text1",
"#some_text2",
"#some_text3"
];
$('#tags').tagit({tagSource: availableTags});
});
</script>
<ul id="tags"></ul>
Something like that is used right here, on this website. Whenever you write a question or an answer in the editor, you get a live update in the area below. When you apply formatting it's updated in real-time in the preview area.
This uses a standard mark-up syntax called Markdown. What's good about that is that there are many tools that support Markdown, so you can find integrations for jQuery and even offline editors (Windows and Mac).
Check this question and its answers for some editors that do this.
Also check out the stand-alone version of the Stack Overflow editor.
maybe this helps you a little bit to understand what you have to do:
http://jsfiddle.net/EeGxs/3/
All I did is add an event listener to 'keydown' which means a key is pressed, and then you just have a look if there is a '#' in the line and if you add it to the p -tag which is bold.
Its only a demonstration.

Categories