Live preview markdown editor - user-controls

Forgive me if this is has been answered. I have looked around, but didn't find anything.
I am creating a site for non-techies and it requires them to be able to add rich text content. I have been looking at Markdown for this, and would like to use that.
I have been searching around for a nice (jquery) ui control to make editing simple, but everything I have looked at has the live preview living somewhere else on the page other than the input box. (WMD is like this, markitup, etc..)
I would like to use something that makes it feel like you are using a word processor. Like how TinyMCe does it, but running on Markdown, not HTML
Is there anything like that, or maybe somewhere that shows how to build it?
To clarify, I'm looking for an editor that makes it feel like you are typing in the live preview; not a textbox with a preview above/below.

If I get what you're looking for, then the simplest approach would be to generate HTML with TinyMCE or CKEditor, then apply something like Markdownify to the output of e.g., tinymce.getContent().

I have since found something that I love. the Pen editor on Github does just what I wanted. I am glad to see someone has taken this on

Check out Stack Edit It's a great WYSIWYG markdown editor - syncs with Google Docs, Dropbox & CouchDB, publishes to Github (and many other places), and offers easy link sharing. You can access it on their website or using the Chrome app. You can create titles and lists in the editor there, and it will show you the corresponding text in markdown format. You can then save, publish, share, or download the file.

Markdown would not be compatible with a WYSIWYG editor. Consider this sample Markdown:
Let's link to [Google][].
[Google]: http://www.google.com/
If you were making a WYSIWYG editor, what would happen after you typed [Google]? Would you see blue underlined text? Would you just see [Google] since it's not a valid hyperlink yet? What about after you type the trailing []? It's still not a fully-defined hyperlink; you can't click it, because Markdown doesn't know where it links.
And how does the user type that [Google]: http://www.google.com/ follow-up line? That line isn't displayed; it's markup; it's invisible. Where do you type invisible text into a WYSIWYG editor?

Related

Sublime Text 2 split active screen like dreamweaver

At work, I have to jump into old mysql_query procedural website build higgledy-piggledy (some var are camelCased AND underscored, no indent code, page are build in table ...)
Anyway, usually I m using ST2, but here I can't. So to search my line code, I use dreamweaver to click on the screen preview and the cursor drop on the code line I want.
I do not like and I don't know dreamweaver. But as code is UNREADABLE, that is the only way I have to work.(My boss doesn't want rebuild theses sites).
Here is my question, does anybody know for ST2 a way (or a plugin) to split screen and click on screen preview to go right to the code line just like dreamweaver preview does ?
Regards.
Answer is simple, you will never find something like that.
Try here - http://webdesign.about.com/od/windowshtmleditors/tp/windows-wysiwyg-editors.htm
WYSWIG html editors.
Try Sublime CodeIntel, as well says this page:
...This plugin brings a little of IDE functionality into ST2. This plugin reads all your code and is able to code-complete, jump into
definitions and function call tooltips. Although sometimes looks a
little buggy, it’s still worth having it around. It’s a huge time
saver, especially when you are dealing with other’s people code.
If is suitable for that project you can remove the package later.

How to create full featured snippets in Dreamwever CS6?

How to create full featured snippets in Dreamwever CS6 ?
(similar to creating snippets in Sublime Text 2 - just like in this video: Here). I want to create a snippet with two or more places where i can insert a code (and switching between those places with tab). Is it doable in Dreamweaver ?
Dreamweaver does not support parameterizable snippets, you cannot hit tab and the cursor is moved to the next parameter in your code chunk. Once a snippet is added to the page, it is editable like all other text.
The only way to get anything like a parameterizable snippet would be to create a Dreamweaver extension user interface (perhaps an Object or Command). Perhaps the following article can help with that: http://www.dwfaq.com/tutorials/extensions/simple_object.asp

Custom navigation with Liknlist web part

I'm using a standard link list web part. What I want to achieve is before my users click on the link a pop-up javascript warning box will display, stating that they are leaving the domain. In regular anchor tag I would preceed the URL with javascript:ShowWarning('http://www.youtube.com');.
I've search the AllLinks table in the database but did not find the links was looking for.
Where or how are these stored?
Thanks,
Risho
Firstly, editing the SharePoint database directly is a really bad idea. You shouldn't do it unless you really, really know what you are doing, and even then you will probably break the system.
Secondly, any change made in the data will be what shows up in the editor, and I don't think the editor supports links that don't start with "http://".
A better approach is to use jquery to add the popup behaviour to the links when the page is loaded.

Employer wants any non-technical staff to be able to modify content - easy solution?

I'm in a bit of a pickle at work. My department designs a number of internal systems for the company, mostly data-reporting related. We have less than 10 true content pages that actually need to be maintained by a human. These pages were written in PHP and maintained through Dreamweaver by a non-technical staff members - they used the design editor, and avoided the code as much as possible. There were issues, but overall it worked well.
Recently this project was updated and converted to a ASP.NET Web Application. This resulted in some architecture changes, making the content harder to edit with a WYSIWIG editor (it's now revision controlled, it's compiled and thus must be re-deployed after modifications are made, etc.). We sort of assumed that the staff member who had been maintaining it would just continue to do so, now using Visual Studio's "Design" mode instead of Dreamweaver's. We were mistaken, and it isn't an option for technical and non-technical reasons.
The staff member will not be touching any HTML - we need a WYSIWIG editor (this is a requirement we were handed...no arguing with them over that). I started looking at CMS', mainly Drupal, but after a bit of playing around I see that content 'Blocks' don't really have a WYSIWIG editor, instead expecting HTML. Is this true for all CMS'? Is there some easy-to-setup CMS out there that comes with a WYSIWIG editor? Does anyone have any other ideas? Don't care what language it's in, I'll make something work.
This really isn't my area of expertise - I do application development primarily, with an occasional web front-end. Not sure I'm even asking the right question, but hoping someone can help.
WordPress makes use of TinyMCE, and it works pretty well for some NON techie clients of mine. You can write (PHP) scripts that will call the WP functions and pull the page content.
Back to the point, I have found the backend of WordPress to be usable and friendly to a good mix of people. We often use it for a backend and build something completely custom for the frontend, and have had good results.
http://www.cushycms.com/
They let you add easy WYSIWYG capability to any website, regardless of the technology used.
You just add a tag once in your source file, and let your users go to CushyCMS.com to add text content.
I am by no means a CMS expert, but I believe SiteCore might suit your needs. It is a .NET system, built on top of ASP.NET, and from my limited experience with it, the UI for business users is very usable.
Take a look on Joomla. It includes WYSIWYG editor. It is much simpler than Drupal
As Frank points out, TinyMCE is a great option, in fact you use it here :D. Have a look at some examples: http://tinymce.moxiecode.com/examples/full.php
The good point is that TinyMCE is just javascript, so in theory you can add it to any CMS, or in fact to any HTML form.
Also, I think is the default input method for Joomla if you are interested.
I would recommend CKEditor (the successor to the FCKEditor), I haven't used FCKEditor in ASP .NET code, but have used it in PHP with a lot of success. I haven't gotten around to converting old code to CKEditor, but plan to in the future.
If this is something where you can load HTML files from your server that has FTP access...a quick and dirty solution I have used is CushyCMS.com, you supply ftp credentials and hook up the files and they are good to go. Non-technical customers of mine have liked the editor a lot. It allows you to specifically say what you want edited and what you don't.
In PHP the way I usually architect using CushyCMS is to have the main page do a require_once on the content page and the content page has the HTML block that I want them to be able to edit.
so the code looks like this:
<?php
//...other code
require_once("page_content.php");
//...other code
?>
where page_content.php looks something like this:
<div id="whatever" class="cushycms">
editable text here
</div>
Hope this helps.
I used to think that for user friendly editing, you need a WYSIWYG editor, such as the TinyMCE that has already mentioned. Not any more.
Editing content in such a rich text editor is not very handy. Very often you end up messing up the content, and either does a technically savvy person have to come to help, or you have to switch to CODE view (= HTML) to clean up the mess.
Now I'd be far more inclined to use something Markdown, like this site (and Reddit) uses. For most purposes, you don't need rich text, and it is just as handy a WYSIWYG tool. If you need a few rich text touches, like making some text bold or italic, this works quite easily too. Lists, either numbered or bulletted, are a snap. And making links... Those WYSIWYG tools always seem to be able to mess it up in ways you can't even imagine.
Plus, this way, the resulting HTML is always clean and minimal, and it's extremely hard for the user to mess up.
What about Expression Web? It is made to edit ASP.NET web pages, and can integrate with TFS

Displaying code snippets in Sharepoint wiki

Is there a way to get SharePoint to display code snippets in a pre-formatted way?
Currently if you insert any code, it just looks exactly like the rest of the text. Anything would be better than nothing.
I found hilite.me which produces html styled code which you can insert into a sharpoint wiki.
It supports a number of languages and styles and is an online app.
No because MOSS's wiki is just a new page with the word "wiki" attached to the link.
Even though this is an old question, I have yet another solution that possibly didn't exist at the time the question was asked:
You can create a GitHub Gist and use the embed code for the Gist on the SharePoint wiki page. This is especially useful if you are already using Gist, want to share the code snippet in multiple places aside from the wiki, and/or want to keep a history of the code snippet separate from the rest of the wiki page.
To use an embed code without the script tags being stripped, go to Insert > Embed Code in the ribbon when editing the page:
This solution assumes that you are using an IDE that already formats the code for you.
Some of the other answers would be better if you have a raw text file.
While editing a Sharepoint Wiki page:
Copy code from IDE to new MS Word doc
Highlight all in MS Word: Ctrl+A
Copy again inside MS Word
Switch to wiki page, Paste
Continue editing wiki or save
Works fine with Eclipse as IDE. Might be able to paste straight from VS to SharePoint.
If you have code snippets you will reuse in multiple pages, Use a similar copy/paste technique to save or upload htm files into a SharePoint document library and then insert a "Page Viewer Web Part" to view the htm inside a different page.
Not that I'm aware of if you're specifically using the Wiki feature. Your wiki entries are stored like rows in a table as far as I know. If you're not using the wiki you can use the syntax highlighter tool. It's all javascript. http://code.google.com/p/syntaxhighlighter/
For several weeks we are using Telerik Rad Editor
One of the tools is "Format Code Block"
You may see it here : http://demos.telerik.com/aspnet-ajax/Editor/Examples/Default/DefaultCS.aspx
If you install the RadEditor for MOSS .. we will get this amazing tool in Wiki pages too.
So this is not a great answer but for us it was better then the default. You can write your wiki in a tool like Windows Live writer (WLW). WLW has an add in for a code formatter. If you write your wiki page via WLW with the code formatter you can then go to the Wiki page and select "edit HTML source." You can then copy from WLW to the wiki page and get good styling.
Best way I have found is to use tohtml.com
You can cut and paste your code into it and it will generate html that you can past into your sharepoint wiki
you can use prisimjs to show code snippets. When you add prisimjs and css you can use like this;
p { color: red }
if you want easier solution to use prisimjs, you can check this:
http://yasingokhanyuksel.blogspot.com.tr/2017/07/sharepoint-code-syntax-highlighting.html
If you want this for modern pages, there is the Source code content webpart from Qualitem.
https://spfxhub.com/packages/qualitem-source-code-content-web-part
Disclaimer: I am a co-developer.

Resources