Rectangle 27 2

If "editor1" is a TEXTAREA, and you are putting the IMAGE tag inside it, this is invalid HTML anyway. If that is what's going on, you're lucky that the image shows up in any browsers. Make sure the IMAGE tag is contained by an element that is designed to hold such things.

If you use the W3C validator, or search for the allowed children of TEXTAREA, you will find that it does not allow img or other tags inside of it. Apart from your other problems, you should be surprised the non-IE browsers showed the image rather than upset that IE did not.

@Graham: Do not put the image inside the textarea. Put the image after the textarea.

Good idea, but... how would it be included in the post when it's submitted?

@Graham: I'm not sure what all you're dealing with. Sounds like a different question to me.

Let me reiterate differently. Only in IE... I can't append any HTML to the WYSIWYG e.g. CKeditor textarea. The problem is when the user uploads an image / any html to the textarea. What happens is the page is refreshed with the appended img tag / any html. In IE anything wrapped in HTML is completely ignored and not appended to the textarea. Sorry, I'm probably explaining it weird. Basically any thing wrapped in HTML is ignored when appended to a richtextarea in IE.

Never mind I figured it out... For some reason replacing innerHTML with value did the trick for IE.

javascript - Append image to rich text editor dosen't work in IE - Sta...

javascript html rich-text-editor
Rectangle 27 4

Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...

document.getElementById('something').contentEditable = true;

Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 4

A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)

The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.

Interestingly, textareas can sort of 'unparse' html. Anything you put inside them (besides </textarea>, of course) will be treated as literal contents of the textarea, not html. This includes even cdata sections and html comments.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 29

If the project type doesn't natively contain JavaScript Support: open Web (or JavaScript) perspective, right-click on the project and select Web Development Support > Add JavaScript Support (this won't hurt if JavaScript support is already present)

then right-click JavaScript Support within the project and select Properties, in the JavaScript section go to JavaScript library and then select Source tab: here you can add folders and files to be scanned by content assist for the current project

In Aptana Studio (as an eclipse plugin but I suppose the standalone version is almost the same): open any js or html file, show References window (or open Aptana perspective in eclipse) and drag-drop js files you want to add to JavaScript scope (it is possible to build and activate different scope profiles with different JavaScript files and resources: just click add profile in the window toolbar)

unfortunately, this way gives you significant quantities of erroneous errors as the built-in javascript parser is somewhat sub-optimal

@Jonathan: "Somewhat?" I just installed the latest Eclipse and it fails on basic things like understanding regex literals with quotes in them, or the undefined keyword when used as a function parameter. Yikes.

@utaal it didnt work for me! If i wirte click on my project, the popup menu does not have " Web Development Support" in it!

@Cgraphics, maybe it's not working because your project is not a web one

I get a lot of errors in my JavaScript file (.js) file for all those global variables declared in the JavaServer Pages (.jsp) file, which includes the .js file. I assume a similar problem exists for HTML. The properties -> JavaScript library source settings only allow me to add .js files, not .jsp and .jspf files. (Currently working in IBMs Rational Application Developer, which is built on Eclipse 3.4)

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 4

A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)

The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.

Interestingly, textareas can sort of 'unparse' html. Anything you put inside them (besides </textarea>, of course) will be treated as literal contents of the textarea, not html. This includes even cdata sections and html comments.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 4

Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...

document.getElementById('something').contentEditable = true;

Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 10

If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.

Basically, you use contentEditable and execCommand to turn the browser into an RTE.

html - How does one go about writing a simple WYSIWYG editor in JavaSc...

javascript html editor wysiwyg
Rectangle 27 41

<script type="text/javascript">
  // This code could (may be should) go in your config.js file
  CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
  ]);
  // This code is for when you start up a CKEditor instance
  CKEDITOR.replace( 'editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
  });
</script>

You can also read the full documentation of the stylesSet.add syntax:

I disagree, this way @joshua.paling you pull through every selector in the css file, which means creating a dedicated file for this purpose.

javascript - Adding custom styles to CKEditor - Stack Overflow

javascript css ckeditor
Rectangle 27 3

If you're referring to the code that's in the Example section, it's normal HTML styled with a highlighter. MozillaDev uses specifically this one : dp.SyntaxHighlighter

lopez: Yes, that was exactly what I was looking for - dp.SyntaxHighlighter. Thank You. To all those who have closed this question, I believe the question was misunderstood. Xavi seems to have got the point.

Which IDE/Editor is this? Javascript related - Stack Overflow

javascript ide editor mozilla
Rectangle 27 7

imo, Aptana is the best eclipse plugin for js editing. It includes support for many of the major libraries like jQuery, yui, dojo, etc.

Spket, however is also good. Though mostly if you do firefox extension development (getting a little out of date though)

The built in js editor is terrible. it claims there are errors all over the place even when there clearly are not.

Thanks for the hint: I just installed Aptana js editor plugin and it looks really nice. But, how do I get content assist for my js files (not libraries)?

if it didn't make the association automatically, go to the window menu -> preferences. In the general section of preferences, go to editors->file associations. Then select the *.js file type and set aptana editor as the default

also, for jquery code assist, you need to go to preferences -> Aptana -> Editors -> JavaScript -> Code Assist and check the box next to jQuery

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 7

I ran into this problem as well.

Short Answer: Window -> Preferences-> MyEclipse -> Files and Editors -> Javascript -> Editor -> Syntax Coloring -> Background

More Answer: You have to poke around for a while, but it seems like everything is somewhere in the Window -> Preferences path, and not necessarily where other related things are.

There's one section for html, one for jsps, and another for all the javascript inside of both of those, for example. One for global defaults (which others inherit... sometimes), etc. The key phrase to look for is "Editor"- then you know you're probably going to be able to configure the color of something.

Eclipse Color Theme - Hard to read javascript in jsp editor - Stack Ov...

eclipse eclipse-plugin themes
Rectangle 27 6

Aloha is the best in WYSIWYG online editors. They have nice wiki as well

jquery - Simple Javascript text editor or set of functions - Stack Ove...

javascript jquery text-editor
Rectangle 27 5

document.getElementById('edit').contentDocument.designMode = "on";

html - How does one go about writing a simple WYSIWYG editor in JavaSc...

javascript html editor wysiwyg
Rectangle 27 4

It's not free/open source...

uh... "Free, Open Source and Cross Platform Download Aptana Studio for Windows, Mac, or Linux. Both the standalone and Eclipse plugin distributions are free, open source software."

I've use Aptana on a couple projects, it's a great product. In the JavaScript space it's the best editor I've seen.

c# - Any Javascript Editor Control for .NET (like in Visual Studio)? -...

c# javascript ide editor
Rectangle 27 4

Find a library you are interested in...Save it to your disk, and then drag it into your project. It does not matter where in the project it sits, so you can create a new folder for files like this if you like.

!! The project must be some type of web project: Web, PHP, Python, Ruby, Rails.

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 4

Disclaimer I'm the author of the tern.java.

I suggest you that you install tern.java which extends JSDT to improve JavaScript support (completion, hover, hyperlink, validation) for a lot of modern JavaScript frameworks (jQuery, jQuery UI, jQuery Mobile, YUI, Dojo, Cordova, etc) See the full list of tern modules

This is the only solution that has worked for me (I followed the installation guide). Thank you for the great work already done and I hope Tern Eclipse IDE stays active for a long time :)

This is pretty nice. It was able to infer most types on a large JS application which had no JSDoc. Comments placed above the functions and variables are displayed in the tooltips.

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 4

I did get this working and upvoted magjis answer above with a caveat.

Dropping the minified JQuery library as per magjis above into a subfolder of an existing project didn't work for me. It did work for me after creating a new project and using the uncompressed library.

There are dozens of outdated posts on SO and elsewhere that refer to deprecated Aptana dialogs and provide information that isn't pertinent to the current Eclipse version. All I know is that for Eclipse Juno 4.2, Aptana 3 and JQuery 1.7.2, here's what works (for me, at least):

Make sure you have the Aptana plugin installed and are in the Web perspective. That's what the Aptana Studio perspective is called...it would be less confusing if they named it something that had the word 'Aptana' in it.

Make sure your default editor is 'JavaScript Source Editor'. Set this in Window -> Preferences -> General -> Editors -> File Associations and choosing the .js extension in the list. There is more than one option in the list box below. Using any other editor didn't even give me code coloring...this is the only one I could get code assist to work with.

Then, to expound on magjis' answer above: Create a new project and add the uncompressed JQuery library by dropping jquery-1.7.2.js onto the project in the Project Explorer and selecting the Link To File option in the dialog that appeared. I linked to the jquery-1.7.2.js in the /js folder of the project root which is where the library usually goes anyway. Drop jquery1.4.2.sdocml into the project and choose to either copy or link to the file. I copied the file into the root of the project.

If I may make a further comment, in retrospect I wish I had given up on Eclipse two months ago and stuck with Notepad++ or spent the time looking for leaner, faster, more stable PHP/JS/HTML/CSS environment.

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 1

A textarea will not parse HTML, but by using a WYSIWYG plugin, an editor will replace the textarea and give the user the ability to view and modify the content. With some editors, such as TinyMCE, you are able to set it to Simple mode, and allow only the basics of formatting (bold, italic, underline, bullets, etc) like you are interested in. This helps keeps the editor from being cluttered with unnecessary tools.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 3

  • Search for JSDT jQuery from the Eclipse market place and install. I found JSDT jQuery 1.5.0.
  • Right click on your project and configure build path (I know I wish it were workspace level too).
  • Go to JavaScript > Include Path and click Add JavaScript Library...
  • Choose jQuery. This is v1.8 support. I looked but couldn't find anything newer.

i am not getting jQuery as an option here for adding JS library. Any workaround..

Eclipse JavaScript Editor: content assist for js files, autocompletion...

javascript eclipse autocomplete eclipse-plugin content-assist
Rectangle 27 2

I use this script to tell the validator to ignore Summernote elements. It can be tweaked to ignore elements generated by other HTML editors.

$('form').each(function () {
    if ($(this).data('validator'))
        $(this).data('validator').settings.ignore = ".note-editor *";
});

javascript - jQuery Validate with Summernote Editor error: Cannot read...

javascript jquery razor asp.net-mvc-5 jquery-validate