How to make html content editable while viewing it in Electron? - javascript

I'm working on Electron app and I'm aiming to let people edit html content while viewing it in app. For example edit that header and button text. Then all changes should be saved.
Application
So in my opinion I should:
Give special id's or class names to that object and manipulate with js to display edit window instead of button for example, change text, press ok and it should save it. Is there any way to do that? Maybe a library or something?

Hard to answer, as your project is in such an early stage, maybe content editable is what you want to use, but this would mean you have to develop it all from scratch
But yeah your idea sounds ok too, have a button to switch the page into a kind of edit mode, let the user change elements of the page and finally save the modified version before turning it back to view mode
Or you use a library like react and use plugins like this content editable plugin or use a wysiwyg editor like draft

Related

Research for a visual html editor which can export the changes or Finding a method for reapplying the user changes in initial html

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.

Take screen shot of picture within web app

I'm working on this webapp here http://dogeify.me/ and I have completely redone it as Flask app (not hosted at that URL, yet).
Essentially, you drag the text that you create using jQuery in order to make the doge meme.
I am trying to figure out the best python solution for taking a screenshot within the web app so that the user will be able to save their picture. Is a screenshot even the best option, or is there any way to select all of the DOM elements and save them as a file? Maybe it isn't even a python solution, as I had previously tried http://html2canvas.hertzen.com/ but I wasn't too happy with the results.
If I had to summarize my question: How can I save an image that has draggable jQuery text overlayed onto it so that the saved image contains both the background and the draggable text?
As discussed in this answer, you can render the html (you can create a page with just your doge and jQuery-overlaid text) to image using QtWebKit. You would need to install Qt (PyQt4 or PySide) on your server in that case.

Is this possible to run html/css or JavaScript in CKEditor?

I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.

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

How to make the HTML page view source UNREADABLE?

We have an option of disabling the right click event on the HTML page at same user can click on view menu > source and can get a copy of the content displayed.
How do i make it into unreadable format? Just like when you do a google search and see the source of page very similar to it? How can this be done?
You can't. You can obfuscate the scripting and minify the html (remove all unnecesary whitespace) that's what google does). So, making the readability of the html (by obfuscation, minification) more difficult is the best option (if you must).
You can also go flash ofcourse, like in this website
How do i make it into unreadable format? well you can't change the format, its plaintext, this is how the browser expects AFAIK, when gmail first came out, its source code was sort of hidden, what they did actually is have the entire source of the page rendered using hidden iframes and JS, as such users would right click and get <!DOCTYPE html><html><head></head><body><div></div></body></html> but this is no longer the case.
how does Gmail hide its source
Try to compress the code using this site http://www.textfixer.com/html/compress-html-compression.php
It will remove all the whitespace and compress the code to make it unreadable.

Categories