javascript live text highlighter like diigo.com - javascript

Does anyone know how to make a live text highlighter in javascript/jquery? with most script ive seen, you have to select the text first then click highlight. how does diigo.com do it?

Simple javascript can not provide functionality like diigo.com.
You need to write browser plugins.
This type of plugins are called BHO (Browser Helper Object)
Creating BHO need some experience and understanding of COM.
See the examples below
Exaple 1
Exaple 2
Example 3

Related

Is it possible to change entire css class / js and anything associate with that?

I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then

how to create a style selector in google closure editor

I wonder how difficult it is to create a working "style selector" selector in the goog closure editor similar to the one in tinymce.
I mean a selector of text styles such as
heading 1
heading 2
heading 3
paragraph
From the documentation I take that there's none available by default, even though there are slightly related default buttons such as bold etc. The logic for the pre-existing buttons I am aware of are provided in a plugin called basictextformatter.js.
I'm familiar with writing plugins and I would implement this using the .execCommandInternal function, and using the ToolbarFactory to create a selectButton.
But my issue is, do I really have to write all the logic from scratch, such as: how much text to enclose in the style selection if the selection is a caret, and removing previous styles on applying new selections, handling cross-browser tagging insonsistencies, displaying the selected style in the button and all of this?
As it seems to be a standard feature in many other editors, is there a chance I have just missed a pre-existing plugin function or other building blocks?
I'd be grateful for any hints for not re-inventing the wheel.
It sounds like you're referring to "plugins," which are objects you can inject into Google Closure's goog.editor.Field text editor. There are many standard plugins that are included in the Google Closure Library (bold, italicize, underline, make a link, etc), though you can always roll your own. For example, I had to make my own paste plugin that removed HTML formatting from pasted text.
After you pick out the plugins you want, you can then add buttons to the editor's toolbar which fire command events that those injected plugins listen to.
Here's a blog post that gives a much better explanation of how to actually set this up than I ever could here:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html
Well I think I found the answer.
There's a plugin which is part of the lib called HeaderFormatter. It's unfortunately dependent on BasicFormatter plugin and doesn't seem to come with a default button (you have to create your own) - but looks exactly like it's the answer to this question.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

making a text edit field

I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.
There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.
The simplest way is to use the <textarea> tag in HTML. See this link too.
You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js

Looking for customizable syntax highlighting in the browser

I'm looking for a customizable JavaScript script which dynamically highlights code in a block like
<code class="someclass">source code...</code>
It needs to be customizable because the source code is in a quite esoteric programming language (Mozart/Oz). Ideally, I'd just edit some regexes to make it work.
I need dynamic highlighting because it should work in the github wiki which escapes all HTML code within a pre tag.
My Google fu has forsaken me so far...
SyntaxHighlighter might be what you're looking for. It supports custom languages, as well.
jQuery Syntax Highlighter is a new one based on version 3 of Alex Gorbatchev's Syntax Highlighter - a really really really popular plain javascript syntax highlighter.
It supports such things as code and pre blocks, able to use classnames like language-javascript to indicate we want it to highlight, as well as wordwrap. You can copy and paste code by selecting it normally instead of having to open a raw view like many others. It can be further customised by using the HTML5 data attribute data-sh or via specifying options at initialisation. A great stable choice which is updated regularly.

Categories