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.
Related
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
It seems the most common aproach to web design is to use HTML/XHTML & CSS in conjunction with other technologies or languages like Javascript or PHP.
On a theoretical level, I'm interested to know what other languages or technologies could be used to build an entire site without using a single HTML tag or CSS style for styling/positioning?
Could a website be made only using XML or PHP alone, including actual styling and positioning?
Presumably Flash sites are till embedded in HTML tags?
Thanks
There are actually several solutions that allow you to nearly completely avoid CSS and HTML.
GWT: Google Web Toolkit
Written in Java and will allow you to build both server and client code in Java. Used to build Google Wave.
Cappuccino and Objective-J:
Objective-J is to JavaScript as Objective-C is to C. It extends JavaScript with many near features, including type-checking, classes and types.
Cappuccino is like Cacoa (Mac OS X GUI toolkit).
Using these two you can build incredibly rich and desktop like webapps. They run mostly on the client side and you can use whatever you want on the server.
A good example is 280slides
SproutCore is similar to Cappuccino, but it uses pure JavaScript instead. Apple is using SproutCore to make me.com.
I should also mention that knowledge to HTML, CSS, JavaScript is a good skill to know, just like understanding your compiler is a good skill.
EDIT:
As said above Adobe Flash can also be used.
You can make a website with out a single html tag. Just give folder read access to all your directories, have sensible file names. From here you user will be able to browse images , read text files, download videos and depending on the content he may or may not come back ever again, but you do achieve the goal of setting up a "website" with out a single line of html or css or any other code for that matter.
:-) :-) :-)
You can host a telnet server with anonymous access and a specialized shell that restricts the user to doing whatever it is you want the site to do. ;)
Lets make the distinction between what is required by the web browser, and what you as a developer use to create that markup.
Remember that HTML nowadays is xml. You could use any markup language you like and convert that to HTML using XML.
eg ASP.NET uses markup such as which is converted on the server to .
As long as the content going down the wire to the browser is HTML, or generates HTML through script, you can use any approach you like.
However these approaches have mostly failed as developers prefer having direct control over the markup. It makes css as well as scripting much easier when you are certain what the html is going to be.
ASP.NET MVC is a product created in response to criticisms leveled at the ASP.NET webforms model.
Also, this is another answer because it's a completely different technology, but you can write an application in XUL and it'll run in Mozilla-based browsers without any HTML.
There's also XML. You can create websites with XML only. A well known one is World Of Warcraft. Check the page source. An XSL is used as stylesheet. There exist even XML based web frameworks like OpenLaszlo. You can let it serve either DHTML or Flash on reqeust out of a single XML template.
The Wt C++ Web Toolkit.
You can write your web application in C++ using Qt-style widgets (input boxes, buttons, tabs etc) and hook up client-side events to C++ code on your server. All without writing any HTML or CSS.
A sample application from their website (you may also want to look at this excellent tutorial):
HelloApplication::HelloApplication(const WEnvironment& env)
: WApplication(env)
{
setTitle("Hello world"); // application title
root()->addWidget(new WText("Your name, please ? ")); // show some text
nameEdit_ = new WLineEdit(root()); // allow text input
nameEdit_->setFocus(); // give focus
WPushButton *b = new WPushButton("Greet me.", root()); // create a button
b->setMargin(5, Left); // add 5 pixels margin
root()->addWidget(new WBreak()); // insert a line break
greeting_ = new WText(root()); // empty text
/* when the button is clicked, call the 'greet' method */
b->clicked().connect(this, &HelloApplication::greet);
}
void HelloApplication::greet()
{
/* set the empty text object greeting_ to greet the name entered */
greeting_->setText("Hello there, " + nameEdit_->text());
}
Curl (requires a browser plugin)
Wikipedia article
A webpage looks like this:
{curl 1.7 applet}
{value
let b:int=99
let song:VBox={VBox}
{while b > 0 do
{song.add b & " bottle(s) of beer on the wall,"}
{song.add b & " bottle(s) of beer."}
{song.add "Take one down, pass it around,"}
set b = b - 1
{song.add b & " bottle(s) of beer on the wall."}
}
song
}
Source
Since browsers view HTML, I'm assuming you mean create a site without ever having to edit/write HTML/CSS. The framework/app environment/whatever taking care of everything for you - yet still allowing you control over the presentation layer.
Seems like that is certainly possible on a theoretical level.
I ran across Noloh (not one line of html) a while back. Was intrigued, but never actually tried it out.
From various places on the Noloh site:
Because NOLOH does not rely on HTML or pages, maintaining complex rich Internet applications is significantly easier than with other methods.
Developing applications with NOLOH only requires using a single, unified language: a superset of PHP that completely maintains all aspects of server-client communication for you!
I think you could build a site entirely in SVG.
The front page of emacsformacosx is almost entirely SVG, for example.
Downsides: It wouldn't be viewable in IE (at least through version 8). And last I looked, text support, like flowing and justification, was weaker in SVG. (You could embed HTML inside an SVG element when you needed sophisticated text features, but that would violate your no-HTML rule.)
You'd probably still want to use CSS with SVG, because it's a good idea there for the same reason it's a good idea with HTML, but it wouldn't be necessary.
A website is always viewed through a browser (at least always if you are human :)). Browsers understand HTML. Whatever the technology - you have to basically render HTML. Even in cases with rich technologies like flash, the flash object that is rendered by a browser plugin is embedded inside the HTML.
In theory it is possible to do it without HTML, but the question becomes how much does the product diverge from the definition of a website...
One really short, simple answer... you can't :D
Flash requires an embed tag, an image requires an embed tag etc, so you'd have to use HTML in some method or another.
PHP is an embedded language, it is used to generate HTML on which the browsers renders, with XML, well technically a browser like Ie or FireFox will render it in it's own way for readability, but I would not class that as a website.
The major developments in the world of web technologies involves the development of HTML and CSS to improve them, there isn't any need for an alternative. In fact we're pushing towards a standard, what point would there be in introducing a new language to negate these standards. The whole IE saga would simply get worse.
Like the others have suggested, you could directly load an image or a flash file, but an image is useless on it's own, and a flash interface throws up loads of problems like SEO, accessibility etc, not least it's very heavy and usually completely misused. In my mind I wouldn't even class this method as a website, it just doesn't tick any of the boxes (IMO).
I think you can have an URL pointing directly at a hosted Flash (SWF) file, I've certainly done this though I don't know if all browsers work.
Anyhow, I tested this when developing MyDinos.
e.g: http://mydinos.com/home.swf
You can use Emscripten and its SDL subset.
You could try using quickstatic. You can code HTML templates from Python3. What is super cool about it is the fact that if you put in a for-loop for a certain item, you can generate that many items (maybe even use it to print items from a directory or quickly serve thousands of links).
I'm in the process of reproducing some standalone HTML forms as pages in a CMS that uses FCKEditor by simply copying and pasting the relevant code into the editor.
But when I save and view the page, the HTML has been changed and the tag has been moved up to just below the open tag -- and not at the bottom of the form. This obviously renders all of the fields in the form, including the submit button, useless.
Is there a way to tell FCKEditor that I know what I'm doing and I don't need it to validate the HTML output?
Unfortunately this is a hosted CMS service (actually part of an email blast tool) so making changes to the configuration will mean I need to go through the company's support system, which is fine -- but they haven't been able to solve it for me yet, so I'm hoping to get the answers for them.
Thanks!
This is a bit of a difficult thing because as far as I know, it's not necessarily the WYSIWYG editors that "fix" "broken" HTML, it's the browsers' HTML editing engines themselves, and it's often near impossible to talk them out of doing this.
You'd have to show your exact source to get detailed feedback, but check out whether protectedSource is something for you. It's supposed to protect code that is covered by the regular expression you specify.
I'm not sure about FCKEditor, but you might want to consider switching to TinyMCE. TinyMCE allows you to both edit a list of allowed tags, and to turn off HTML validation off completely if you like.
(Beginner to HTML)
I have made a Photoshop mock-up of the website I want to make, but the text I have used in the mock-up looks different when viewed in Firefox. The text is Arial font, size 18pt and regular weight, and I have implemented this into HTML code, but it looks different.
Is there a way to make the font look the same in HTML as it does in Photoshop?
Thanks in advance :)
The short answer is "no". Photoshop has a lot more font functionality than a web browser. It applies all kinds of smoothing algorithms, and you can control kerning, tracking and spacing much better.
Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.
However, check out all the CSS properties for text to see if you can get something you're able to live with. If not, your best bet is to just make an image out of your text and add it to your page with good "alt" text and such.
I'm not sure what OS you're on, but Windows and Macintosh have different font systems.
This post by Joel Spolsky points out that the font rendering is based on philosophical differences.
Is that what you're seeing? Please post images so we can see what you're talking about.
Fonts are something you simply can't get right on the web. If you absolutely have to control the look of fonts, then you have to use images (and get beaten for it, rightly so). It's simply not possible to achieve pixel-perfect text display in HTML. This starts with differences in fonts the operating system has and ends with differences in browser layout engines.
There are two ways to do it:
Take an image of that font and use it in the layout.
Use a custom font creation tool like SIFR or FLIR. This is a tricky option b/c you need to own Adobe Flash and you need to have the distribution rights to the font (similar to books, music, etc.).
Basically, if you want to have it look exactly the same and still stay standards compliant, this is really almost impossible.
If you're looking for how to turn Adobe Photoshop mockups into HTML documents, you should check out the screencast series on CSS-tricks.com, run by Chris Coyier, a very talented designer (no it's not me :) ).
Another thing that you will have to understand is that it is the people with the Web browsers that ultimately control how your page will look. So no matter how much fiddling you do to get a website the way you want to see it, it will view differently on someone else's computer
If you need perfect, crystal clear font matches you can use flash... but that comes with a whole boatload of downsides.
In my Delphi program I want to display some information generated by the application. Nothing fancy, just 2 columns of text with parts of words color-coded.
I think I basically have two options:
HTML in a TWebbrowser
RTF in a TRichEdit.
HTML is more standard, but seems to load slower, and I had to deal with The Annoying Click Sound.
Is RTF still a good alternative these days?
Note: The documents will be discarded after viewing.
I would vote for HTML.
I think it is more future oriented. The speed would not concern me.
The question of HTML or RTF may be irrelevant. If they are just used for display purposes, then the file format doesn't matter. It's really just an internal representation. (Are any files even being saved to disk?) I think the question to ask is which one solves the problem with the least amount of work.
I would be slightly concerned that the browser control is changing all the time. I doubt the richedit control will change much. I would lean towards the richedit control because I think there is less that could go wrong with it. But it's probably not a big deal either way.
Have you considered doing an ownerdraw TListView?
I'd also use HTML. Besides, you just got an answer for the clicking sound in TWebBrowser.
If you'd rather not use TWebBrowser, take a look at Dave Baldwin's free HTML Display Components.
I would vote for HTML, too.
We started an app a while ago...
We wanted to
display some information generated by the application. Nothing fancy, just...
(do you hear the bells ring???)
Then we wanted to display more information and style it even more....
...someone decided, that RTF isn't enough anymore, but for backwards compatibility we moved on to MS Word over OLE-Server. That was the end of talking about performance anymore.
I think if we would have done that in HTML it would be much faster now.
RTF is much easier to deal with, as the TRichEdit control is part of every single Windows installation, and has much less overhead than TWebBrowser (which is basically embedding an ActiveX version of Internet Explorer into your app).
TRichEdit is also much easier to use to programmatically add text and formatting. Using the SelStart and SelLength, along with the text Attributes, makes adding bolding and italics, setting different fonts, etc. simple. And, as Re0sless said, TRichEdit can easily be printed while TWebBrowser makes it more complicated to do so.
I would vote RTF as I dont like the fact TWebBrowser uses Internet explorer, as we have had trouble with this in the past on tightly locked down computers.
Also TRichEdit has a print method build in, where as you have to do all sorts of messing about to get the TWebBrowser to print.
Nobody seems to have mentioned a reporting component yet. Yes, it is overkill right now, but if you use it anyway (and maybe you already have got some reporting to do in your app, so the component is already included) you can just display the preview and allow to print / export to pdf later, if it makes any sense. Also if you later decide that you want to have a fancier display there is nothing holding you back.
If both HTML and RTF won't satisfy your need, you could also use an open source text/edit component that supports coloring words or create your own edit component based on a Delphi component.
Another alternative to the HTML browser is the "Embedded Web Browser" components which I used a few projects for displaying html documents to the user. You have complete control over the embedded browser, and I don't recall any clicks when a page is loaded.
I vote for HTML also
RTF is good only for its editor, else then you'd better go standard.
RTF offers some useful text editing options like horizontal tabulator which are not available in HTML. Automatic hyperlink detection is also a nice extra. But I think I would prefer HTML, if these features are not required.
I vote for HTML.
Easier to generate programmatically.
Widely supported.
Since you don't need WYSIWYG capabilities I think HTML advantages trump RTF. Moreover, should the need to export generated data for further, WP-like editing arise, remember that major word processor can open and convert HTML files.
Use HTML, but with 'Delphi Wrapper for Chromium Embedded' by Henri Gourvest , Chromium embedded uses the core that powers Google Chrome.
Don't use TWebBrowser, I'm suffering from all programs that use IE's web control - the font is too small on my 22' monitor with a 1920x1080 resolution, I use Windows 7 and my system's DPI is 150% (XP mode), I tried everything to tweak trying to fix that, no luck...