I'm making a forum-like website, and really want to implement a WYSIWYG editor if possible because my targeted users are foreign to technical work. Doing something like image upload/display/resize using markups will be too hard for them I suppose.
But after reading here on stackoverflow and trying it out myself, I suppose the WYSIWYG editor I'm using (WYSIHTML5) won't be safe enough for public use.
So come my questions:
Is there any "WYSIWYG editor"-like library that doesn't actually use html markup? Something like stackoverflow's editor (with toolbar and a real time preview box) is acceptable actually.
If there's nothing like that, is there anyway you can think of to implement WYSIWYG editor that can prevent user from doing harm to the server and/or other users? What can I do to ensure that?
If you like StackOverflow's editor and think it will fit your needs, it's called PageDown. You can find the code here.
Related
I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.
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
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
What I am talking about is similar to what Google Docs did with the word processor. I want to be able to enter text without using a <textarea> but the javascript hard coding it in. How would you do this? Any ideas?
I don't think it's possible but You can you an modify textarea itself using CSS so the user will not feel that this is actually text area is. I believe that this is what Google docs are doing. Just good CSS work.
I am trying to some-how set the valid HTML tags and attributes users would be able to use in WMD Editor in my site. For example, I want to forbid the user to directly set the font size, color, typeface and so on, which is trivial to do with the default settings typing something like:
<span style="font-size: 45px; color:#FF0000">Some intrusive text here</span>.
I think the way to implement this is through the "wmd_options", but I have not found any documentation or reference regarding this, giving the fact that the 'Options demo' seems to be the only public documentation and it does not show how should I do what I have described above.
I've send this same question to support#attacklab.net but didn't get any reply. As stackoverflow uses this editor someone reading this or maybe Jeff knows the answer ;)
Thanks in advance!
I know you wanted to know how it can be done via the wmd editor but you must surely realize a javascript editor is not going to stop people on this.
If you want to know how some of the tags are stripped on the server on stackoverflow, you might want to take a look at this.