I would like to let my users define their own layouts for their profiles within some reasonable guidelines. Imagine the controlled aesthetic of Facebook with some additional user flexibility. I'd like to offer these abilities:
Define paragraphs of text with headings, bold, and bullet points (no user control over fonts, colors, sizes etc.)
The ability to upload a couple of images per page.
The ability to set those images anywhere in the page (left or right) in the page and have the text flow around.
How might this work? If all this data is to be stored in the database, how should I think about setting up these features?
Thank you very much.
You might use a HTML WYSIWTG text editor, that you can embed and it gives a graphical interface to the user to create paragraphs, list, links, images, generally anything that you could do in HTML.
I would recommend CKEditor if you are fine with this kind of solution. You can easily set it up according to your needs (restrict it to certain features, etc.). You can also include an image upload solution. The result will be a piece of HTML, which you can save in the database and show on the page when requested. Check the demo and if you like it, read the documentation.
UPDATE: You could also take a look at TinyMCE or the YUI Rich Text Editor.
I have done almost same what you describe. But using liquid (https://github.com/tobi/liquid). Its a very powerful template language and have many interesting features
and for html markup's I prefer using redcloth (http://redcloth.org/)
cheers
sameera
Related
Does anyone know if I can integrate GrapeJS into my own website so clients could build their own websites using it? IF anyone has done this, how easy is it and are there downsides?
This question is pretty open ended, but I'll take a shot at it.
The short answer is yes, you can use Grapesjs to allow clients to make their own sites; however, the details matter.
Grapesjs by default doesn't know anything about your stack, website structure, metadata, etc. You will need to either supply plugins or implement those features yourself. I've worked on a project for a company that used Grapesjs to implement single page apps and I'll include just some of the tweaks we had to manage.
Hiding certain layers that only confuse average users.
Hiding pretty much all of the styling, and using traits to allow people to pick from some predefined styles.
Take the html, css on store and generate the final html page, and store it in our static serving folder on the server.
Implement a wrapping "App" component that has traits for the different metadata we want users to control (open graph metadata, title, etc)
and those are just the big things, I'm sure I am forgetting several small ones.
For your application, you'll also need to implement a custom trait for links / buttons that allows you to link from one "page" to another. As well as, a way to allow a user to pick which page to work on.
The long answer is Yes, but Grapesjs is only the starting point.
Yes you can.
However it is not straightforward.
If you want to build a Drag Drop Editor like GrapeJS Demo, here is the Source Code - https://github.com/artf/grapesjs-preset-webpage
You can see an implementation at https://codegres.org/dragdrop
An awful lot of modern web traffic (particularly on social media) consists of screenshots from web browsers. These typically include some formatted text, some layout, and some bitmap/vector graphics. E.g.,
It's really easy to take and share a screenshot, but it throws away lots of useful information and doesn't transfer well between devices (not to mention being far less amenable to things like screen readers for the blind and fancy data-mining). Of course the ironic part of this is that HTML/SVG is the perfect format for representing such data, and we're not using it even though it's right there.
html2canvas comes close to doing this, but doesn't properly handle images, see some semi-related discussion here.
My question is this, how can I select a visible area in my browser and save it in a format (ideally HTML) that preserves text and images and renders to something roughly similar when rendered separately? (so that it could be included as e.g. a data iframe for sharing).
I know that this is in general impossible, and that rendering HTML is a complicated task, but I feel like it should be possible to ask the browser something like "what elements are being rendered within these pixel coordinates?".
First:
Right click on page, then click on "Save page as".
Save it with a name that ends with .html (or .webarchive in some scenarios. See which works best for you).
Edit the now saved html file to only have the part you want (you can use any text editor. Sublime Text and Atom are usually suggested).
Then:
You can open it in your browser to see what you are up to.
You might want to inspect where the CSS is from too, and get that in your html's file folder, then link the html file to it, so as to preserve the styles.
As far as I understand, you'd want to bring all the CSS to be inline, or, at least, in the <head> section of the html file, so you can upload it as a single file, and don't need to keep linking it to the CSS file.
I have a report I need to print out in an application I'm usually doing maintenance for. My question, which interests me beyond the scope of this task is, what are the ways to format an HTML page for printing? What are the pros and cons of each?
Note that the page is meant only to be printed. I'm not asking about an HTML page that looks ok also when printed.
Generally speaking, I know I can either rely heavily on <table>s or on <div>s, but I don't know which way to go.
I would also appreciate some resources to get me started, or to help with known problems, in any method you suggest.
Thanks,
Asaf
As you can certainly see, printing and web presentation are two different creatures. The main issue is the bounds of the printed page, which does not exist in a web page. Even if you think you have a page laid out in a manner that will fit a printed page, then you need to deal with the fact that the font you are using may not work or scale correctly on the user's printer.
I know of three ways to deal with this issue:
Use fixed-sized fonts (like Courier), limit yourself to an 80 column width, and only use font characters: meaning use something like asterisks for borders, etc. This is VERY old school - your reports look simple and old and plain. But, they will always print they way you intended.
Convert your report to an image. Images can be made to confirm to a specific size which can fit on a page. However, you can still have issues due to printer margin settings.
Let another application do the work for you. What I mean by this is put your report into a PDF or a spreadsheet. Both PHP and Perl have easy to use modules for creating a PDF - with no licensing needed. Perl has a fantastic spreadsheet module. This route takes a little learning up front, but frees you from having to be an expert on printing (which can be a real pain).
In case you DO want to have a page that also looks good when viewed in a browser, consider multiple stylesheets for different medias.
I am building a web application that will need to allow users to save formatted text to a database. Basically they just need to be able to change font color, font background color, font size, bold, italics, and underline.
I would like to use something that I can just attach to a text area to make a formatting bar show up.
It would be nice to use something that marks up the formatting in something besides HTML so that I can HTML Encode the input when storing it, for safety. It would, of course, need to convert its own markup into HTML when rendering back to the browser.
What options are out there?
FCKEditor is one of the best fits for you. We are using it in one of our ASP.NET MVC web applications and it's awesome.
Before selecting FCKEditor, it tried other web editor but the ability to configure them was not good.
Check FCKEditor at: http://www.fckeditor.net/
I'd take a look at the HtmlEditor in the latest version of the Ajax Control Toolkit. I haven't used it yet - but for free, you can't beat the price.
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/HTMLEditor/HTMLEditor.aspx
I can recommend you WymEditor.
It's WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG).
It was perfect for my small pseudo-CMS module to force users to use only a few defined styles from a list, but I have no idea if it'll suit your needs.
Plan B is to use TinyMCE which I prefer more than FCKEdit.
I required to write a small web application that allow customer to select predefined layout template in html and be able to modify it. The application need to allow customer to add block text to pre defined area and images. The block texts need to be able to reorder based on customer need. eg. move up , move down or move to sidebar. THe complete layout will be able to convert to table layout and inline css due to email program doesn't like div & css. I don't know where should I looking for the information to make this happen, could anyone show me how to do this.
Thank you
Of course, I may be misunderstanding you. You might consider using a standard content management system such as:
linux based
joomla
Mambo
Windows based
DotNetNuke
Sharepoint
Those systems have the functionality you described built in with the added benefit that most of them are free and open source.
I'm not sure why someone downvoted you, but check out a javascript framework like script.aculo.us or Yahoo's YUI
Those will go a long way towards creating the interface you need. Also they have a lot of examples.
The Yahoo framework has an inplace html editor (I think that is what you are asking for). Another editing is the fckeditor.