I have mini forum site im coding and when users make their profile they get to add a little info about themselves. I want them to be able to make list elements and add images into this description, as well as make /n (drop a line). How can I do this from a simple input text area? is there any jQuery text area plugins someone can recommend.
As it stands I have the users start any list elements (bullet points) with * and then just septate out the lines and stick them in list elements, for images I make them upload the image, they get a ref number and put that in the box between two sets of ++.
This is not very user friendly, anyone have any suggestions or plug-ins i could use to better this?
Sounds like you need a HTML editor such as TinyMCE. This will change a textarea into a HTML editor, which will give your users the ability to format the content with lists and images etc etc.
have a look at the following plugins available for your need. CL Editor, [CK Editor] (http://ckeditor.com/), TinyMCE.
Related
What is the easiest way to add custom fields for image banners without creating a separate plugin for a new banner type?
If plugin is the only option — where can i find info about how to do it?
(I am studying the OpenX video plugin but it includes a plethora of features that i don't need, thus making it rather complex.)
I understand the need to find "out of the box" solutions, but I would only do that if I had no other option.
If you are just wanting to have basic banners that will navigate to selected ad location, you can make your own up loader form. You can find many examples to help you.
Info to be collected can be anything you require such as with the image selection box, image dimensions, BG colour, URL link, ALT text, banner type, banner location and so on.
If you are monetising them, you can count the clicks.
A simple way would be to bounce your ad to a blank page momentarily to register your info in your Database before redirecting to the actual page.
Without knowing what scale or implementation you require, It is hard for people to target the right reply to your question.
I would say to use a given ad administrator a go, then all you need to do is paste the code into your site.
I personally use Google AdSense on my site, but there are others.
I am going to use CKEditor to format the text while editing the content of my website. The content is saved into MySQL database, so if I use CKEditor, will the text be saved with its formats (size, color, etc) and displayed with that format in client side?
Yes and no. Not really.
Some information will be saved, yes, but some other will require the CSS of the editor page and the display page to match. They usually do, but not necessarily.
CKeditor offers several ways of customizing the HTML that's being generated. Your best option would be to use CSS classes for SPAN and DIVs, and all other tags you allow in the editor; then, define those in a separated .css file that would be imported by your CKeditor edit page as well as the site at large. This will give you as much WYSIWYG as you're going to get.
(I'll try and whip up an example later when I get access to a CKeditor on my servers; but you can also looks at CKeditor' documentation).
Yes CK editor will save the way you specify. On CK editor you have a source button if you click on it you will get the html source.
I need to achive something like this:
As you can see, we have a base picture of a motherboard, and then 2 specifics areas of this pictures highlighted. On the left we have a component image, and the user has to choose one of the hilighted areas.
I checked jQuery JCrop, Mootools Moocrop... but neither one seems to be valid. What I want is to set a base big picture and select 2 or more areas there. I will store the coordenates on the database.
After that, I'll load the picture with the areas and ask the user to choose one area, like in the picture.
Does anyone have any clue how can I achive that?
Ignoring the actual mechanics of the highlighting of the areas, if you want to make those areas clickable or otherwise JS-actionable, you can use an old-school HTML image map.
I think this http://www.sanisoft.com/blog/2009/01/23/img-notes-v02-a-couple-of-bug-fixes-and-some-more/ may help you with some changes in the JS.
I managed to create a simple blog and an admin page using PHP. I didn't use a CMS like wordpress because I wanted a deeper understanding of PHP.
I wanted to create an admin page that allowed the user to specify where in their blog posting they could put in a picture; for example, they can add a photo before the first paragraph or after.
My admin page as it is now is just a textarea input field and a submit button that submits text-only blog posts from the textarea field to the database. My thought process was that I could add img tags into the textarea input field, but the user's photos might be stored on their hard drive so I thought of the idea to store PHP code in the textarea input field to retrieve image files from the database. For example, if I wanted to place a photo after the first paragraph of the blog post, I would type something like this into the textarea field:
This is the first paragraph. Here is a photo of my vacation:
<? echo "<img src='getPhoto.php?page=blogPost'>"; ?>
Then I click the "submit button" and the paragraph with the PHP code gets submitted into my database. The page with the blog posting retrieves the text, "This is the first paragraph. Here is a photo of my vacation:" and the PHP code. The PHP code then retrieves and shows the photo.
The problem is that submitting PHP code with the blog text might be confusing for a user who is not tech-savvy or does not have any programming knowledge. The admin page should make it possible for the blog writer to place photos anywhere in their blog post without programming knowledge. I haven't found a tutorial yet that covers image placement in a PHP blog's admin page. Any help getting started would be appreciated.
One way to accomplish what you want is by implementing custom shortcodes. In you case it'd look something like this:
This is the first paragraph. Here is a photo of my vacation:
[image bahamas-00123]
How it works is that you do something like this:
$text = shortcodes($text);
You'd need a separate area for uploading photos and some way of keeping track of them (ie: sql, flatfiles) so you know that bahamas-00123 actually refers to /some/path/DSC-00123.JPG.
For some code please check the accepted answer of: How do I replace custom “tags” in a string?
You can use a text editor like ckeditor or tinymce to format the text and upload images. This way users need not be aware about the custom tags and they can place the image wherever they like.
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.