I've written a plugin which inserts photos/video from a popup lightbox into TinyMCE. This worked fine and formatted very well when aligned/wrapped. When it is inserted in HTML like below:
<img src="blah.png" />
But since then I added a feature to allow captioning, which uses a wrapper div such as:
<div class="ImageWrapper" width="x" height="x">
<img src="blah.png" />
Caption here
</div>
There are now a couple of problems I can't fix.
First: How do I allow TinyMCE to format/align the div as it did with img?
Secondly: How do I prevent the user from selecting any of the contents of the div? Instead clicking should highlight the whole div so formatting and deleting works much more smoothly.
The problem is using a <div> as a wrapper, which is apparently not naturally supported by TinyMCE. You have to go further than fidgeting with some css. TinyMCE being a popular editor, people have already tried and come up with a proper solution. Here's someone who's written a plugin: http://www.tinymce.com/forum/viewtopic.php?id=20319
And there's lots of more info to be found if you google for 'tinymce div plugin': http://www.google.com/#q=tinymce+div+plugin
I don't know what would work best in your situation, so I guess you have to try some of the solutions (plpugins) offered.
Related
<div><p> </p></div> - These tags has been added to my code because of a wysiwyg editor that I can't tweak or change. How can I remove it ideally using CSS or if not jQuery as it messes my layout.
Here is the structure generated by the wysiwyg and I need to clean it up. I can't change the wysiwyg editor because there are already lots of articles written using that editor. Only solution I can think of right now is purely frontend. By the way the platform is Rails
Thanks!
In your HTML
<div class="tempDiv" style="display:none"></div>
And then some jQuery:
var crappyString = "<div><p> </p></div>";
$(".tempDiv").html(crappyString);
var sanitisedString = $(".tempDiv").text();
Related to an issue I've encoutered in the past: When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND
can't tweak or change
Sometimes it helps when you can talk to other devs: TinyMCE- Get plain text
For SEO is better to get out wysiwyg and take by hand every article and clean it. I get same situation in Joomla, and I do same. Is hard to make a good css/js selector to clear just div, div > p, div + br with no text. The default wordpress editor make text more clean, try to see if is free on the market and add it on your app.
I've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
has anyone stumbled upon image editor done either in pure JS, or jQuery - that kind like CKEditor has?
I'm looking for piece of code, that adds handles to image, so you can resize it, or even drag image around, as you wish.
Thank you.
Edit: rephrased.
Here is wonderful image crop/resize JQuery plugin http://www.cropzoom.com.ar/
Yes there are numerous online. Find here. jCrop is exceptional and awesome.
The way editors such as tinyMCE and CKEditor do it is like this
<div contenteditable="true" id="div1">
<img src="tache17.jpg" />
</div>
gimme html
It's a browser thing not a JS thing.
Of course placing the image in the div and making the div contentEditable is done with JS but the resizing handles you are talking about are generated by the browser.
Note
I haven't tested this in anything other than firefox
if you are looking for croopzoom and the website don't work?
look at github -> https://github.com/cropzoom/cropzoom