Custom Style Editor

You can custom editor style with external css file:

$('#wysiwyg').wysiwyg({css: "/mystyle.css"});

Another example:

$(function() {

    $('#wysiwyg').wysiwyg({

        controls: {

            indent : { visible : true }, outdent : { visible : true }, insertHorizontalRule : { visible : false }, removeFormat : { visible : false }, separator09 : { visible : false } 

        }, css : "/my-wysiwyg-editor.css" 

    }); 

});

And use, for example:

body {

    font-family: Monaco,Lucida Console,monospace; font-size: 13px; 

}

What if i want to integrate it with asp.net page, what do i have to do?

How do you get a reference to the current wysiwig editor when there are multiple elements on the page?

For instance, if I have custom button that performs a window.open to show a page that returns a HTML string from. How can I get it to execute the insertHTML method on the rte that the window.open() fired from?

Think the textarea in the context of a form. Or fake a form. When submiting the form, ASP or PHP will receive the information. I'm doing it this way:

<textarea name="wysiwyg1" id="wysiwyg1" class="wysiwyg" ></textarea> <button class="save" onclick="save()">Save</button>

Adding a function to send the information to server side, with this value: editorInstance.val()

Is there any chance that we can make it resizeable? I tried with the Jquery Ui resizeable functionality but it failed.

makoken

resizing feature has been added.

http://akzhan.github.com/jwysiwyg/examples/04-resizable.html

How does one "un" wysiwyg a textarea? Is this even possible i.e. I would like to make the textarea a wysiwyg on entry and then return it to a normal textarea on exit.

gevanzyl

When You using latest jwysiwyg from http://github.com/akzhan/jwysiwyg

Simply do $('#editor').wysiwyg('destroy');

gevanzyl

Why bother resetting them when exiting!?

How does one repopulates the wysiwyg? Eg: on ajax post, repopulate it: I tried $('#wysiwyg').wysiwyg('setContent',html);

but this repopulates without applying the html formatting, so one will get: b>xpto</b> instead of a bold "xpto" string.

migueldealmeida

Retry it with http://github.com/akzhan/jwysiwyg

If error persists, attach page with broken behavior to be fixed.

I tried a simple test with what was above http://akzhan.github.com/jwysiwyg/examples/04-resizable.html and ran into some problems with bulleting.

So I created some random sentences. Then enter x2 then made a list of 3 items. When I clicked bullet, the entire contents were indented as 1 bullet.

I could NOT get the list bulleted no matter what. I could Not get anything bulleted except line 1 of text which grabbed everything in the content.

I then tried adding a hard rule. Then I was able to create a bullet list after, but if I deleted the hard rule and the extra space, the bulleting went away and i Was left with the original problem - the whole glob was a bullet.

Any thoughts - I really like the simplicity, but the basics have to work for me. Thanks

Also xhtml compliant - I am not well versed, but shouldn't <BR> be <br /> - just wondering...

i just set the textarea width property, and wish it auto break line when my input meets the right edge, but i failed!

I have made a i18n version of this editor, but can't seem to find a contact so I can send the zip file. Anybody? You can reach me on ardaviesATtiscaliDOTcoDOTuk if you're interested.

Is there way to disable the wysiwyg area? That is, be able to see the contents correctly formatted, but unable to edit?

$('#your-ed').replaceWith($('#your-ed').wysiwyg('getContent'));

This seems to have some problems when I browse to a site using it on an iPhone with Safari. Text is inserted as all caps and focusing is really hard. Has anyone come across this? The site I'm testing on is: http://www.bitsdujour.com

@gevanzyl

you might be able to use a function that adds a class or ID to the textarea on focus then removes it onblur. I haven't tried it myself but was considering it. If I get something worked out I'll post it.

insert text in wysiwyg?

$('#wysiwyg').val('MyVal?'); ????

Hello,

I have three textareas on a page and have given each a unique id... when calling the function I reference each id individually $('#id1').wysiwyg(); the first textarea is rendered as the wysiwig, however, the others are not???? Any reason why this may be falling over.

sadasdasdadasd

Paste from Word?

how can i open popup then insert textbox value on the popup window to the opener wysiwyg ? Thanks

New to php/js, How do I send jwysiwyg's value to php script by pressing "submit" button of a form. This works in js <input type="button" value="Show HTML" onclick="alert($('#wysiwyg').val());" />

I would like to embed raw HTML using jwysiwyg (so that I can add a gist inline with my blog post). Is this possible?

Thanks.

http://wiki.github.com/akzhan/jwysiwyg/

resolved a problem with a border when click on button on a toolbar via CSS: img, a:focus{ outline: none; }

0z0n, please use latest 0.91 version from http://github.com/akzhan/jwysiwyg/downloads

There are many bug fixes and improvements.

Hello.

Can you add button for pre/code tag?

Thanks.

Hello, great plugin super easy to setup, good job.

I was wandering is there is any way to simulate the focus event (when the user clicks the editor or "TABs" through the form). I just need a simple background color change, or an addClass.

Thanks.

how to do a button for text color ??

Was getting an error in ie8

Message: Could not set the cols property. Invalid property value. Enter a value greater than zero. Line: 657 Char: 13 Code: 0 URI: http://localhost:21329/Scripts/jwysiwyg/jquery.wysiwyg.js

change both:

if (newX === 0 && element.cols) {

newX = (element.cols 8) + 21; element.cols = 1;

} if (newY === 0 && element.rows) {

newY = (element.rows 16) + 16; element.rows = 1;

}

Now dont get any error. Should this "fix" be in the source or is there a better method i should have done.

Just want to ask... can I impliment "Spell as you type jquery plugin here"?

here is the link = http://www.opencomponents.com/spellayt/demo/

$('#txtTextarea').each(function(input) {

$.fn.spellayt.checkSpelling(this);

how can I attach an onChange event, so I can capture the text as it is being written? or is there another way of doing this?

i'm trying to insert youtube videos, i have accomplish show the dialog box asking for the video URL and insert the embed code youtube gives but i can't make it work, it's like it wasn't rendered or something. Could anyone help me with that?

$('#my-editor').wysiwyg('clear',""); $('#my-editor').wysiwyg('setContent',"content to insert"); $('#my-editor').wysiwyg('insertHtml',"append content to editor");

if you read through the js file you would find these commands and be able to update modify wysiwyg in realtime via code

great jQuery tool, thanks

What would be the method to replace DIV tags with P tags for line breaks and paragraphs. Right now when we type text and line break it inserts div tags which is breaking our template design. Or if someone pastes text in to use p tags for paragraph breaks by default.

How do you get multiple instances of the editor to appear on a single page? I've tried all kinds of things, but nothing's working.

give every textarea a different id, and call $('#area-id').wysiwyg(); for every textarea in document ready area.

Thanks, @i...@youssef.de - totally an obvious solution!!! Guess I shouldn't be trying to program late at night! I ended up just calling a class, $('.wysiwyg').wysiwyg(); and applying the class to the different textarea's I want to wysiwyg to accompany. Thanks again!

What about image upload from disk?

How can i use this code with the wysiwyg - now:

jQ(document).ready(function() {

jQ("#textbox").keyup(function () { alert(jQ(this).val()); });

In other words how can i capture the keyup on the wysiwyg control?

FYI to all: This project has been moved to github and is now here: http://github.com/akzhan/jwysiwyg

How count words in content

Hello!

Is there any way of applying a default class to all the uls in the entered text?

Thank you.

Hi, I don't setting language for it. Can you help me? thanks

I'm sorry, but how can i send what i have typed in the field to the PHP script?

Using Chrome it insters <div> instead of <p> and breaks my design. How to make it insert <p> instead of <div>?

Hi, I've been stopped cold by something really simple: referencing the css style sheet for the textarea in jwysywig. nothing I'm doing is working? What is the path relative to? Any particular reason you don't make an option to just suck in the css associated with the original textarea?

why cant i change the width of the textarea?... its stuck... i tried within css of the textarea and i tried formWidth in the javascript... wow... lame.

how can i get response from editor textarea iframe using onblur function plz do help if you have any solution

is that all, what about setting value, i'm not mention about initialContent. for example if i want to set it's value when i click a button. insertHTML as it says inserting on the old value.

oh sorry i found the answer on top:) thanks s1kb0y.s...@gmail.com

Hi I found,that if you do some text formatting and after remove all text,the formatting still remains for example like this : <i><br><strike></strike></i>. As you see no text are there but this prevent my validation for work correctly. Any help?

Would you be able to disable image upload and only allow image links?

I am using this in asp.net page. I first initialise using

$('#jwysiwyg').wysiwyg({

resizeOptions: {}

})

$('#jwysiwyg').wysiwyg('insertHtml', $('#div_1').html()).wysiwyg("destroy");