The text alignment plugin should have an option to use classes instead of inline styles.

Would be good to add this behaviour while support for older browsers is implemented.

Currently, to make Raptor function correctly on a textarea, one must use at least:

<textarea></textarea>
<script>
    $('textarea').editor({
        replace: true
    });
</script>

Failing to use at least replace: true results in broken behaviour.

Raptor should detect textareas and replace them automatically, and the replace option should be removed.

I'm testing the latest version of the editor on my forms. Unfortunately, now when I save, the data is no longer passed through as it did last time.

To confirm, I switched back to TinyMCE with the same form, and the data successfully passed.

I know there were some recent changes to how textareas were handled. Could something inadvertently been changed that now adversely impacts form handling and submission?

Allow pasting images from the clipboard.

Hi!
I am trying to use raptor, but I get the following error on script loading :
Uncaught ReferenceError: rangy is not defined , raptor.js:8805
That's with jQuery 1.7.2.

By the way is there anything else needed to be included than raptor.js ? no css or anything ? The Install instructions are a bit unclear on this subject.

I'm now testing the editor within Joomla, and thus far no conflicts. I am using the latest version of raptor.light.min.js (because I already have jQuery and jQuery UI loaded in my test installation).

One minor quibble - the editor seems to be slow for fairly fast typists like myself. The lag when I type is noticeable (as compared to, say, TinyMCE and CKEditor). This also happens when I test Raptor in the provided download example. My computer is a quad core and I'm using Chrome, which is a fairly fast browser, so I doubt those are the culprits.

Any ideas or suggestions? Thanks!

The image toolbutton to edit image size remains visible if you press "del"-key to remove the picture and have mouseover event active. Seen in FF.

When the cursor is within a list and the user presses tab / shift + tab, the list should be indented / unindented accordingly.

I am calling $.editor( { initialLocale: 'en' } ), but in the "Insert Link" popup, the options under "Choose a link type" are displayed in German.

Latest version (tried raptor.js and raptor.light.js) as of 2012-10-29.

The provided documentation is EXCELLENT - for developers. However, I'm looking for documentation that specifically tells me how to enable each of Raptor's options when I am initiating the editor. I do not want to enable the entire ui block. For example, I want specific edit buttons {H!, H2, etc} as well as the character counter (and I need to pass the counter the desired character limit via PHP variable, as this number will be different based on where the editor is called). It shows in the code documentation as a UI feature - but the documentation shows the jQuery direct calls, and NOT how to call it when initiating the editor.

Sample code (the character counter doesn't work, obviously because I'm not calling it correctly):

// WHERE does length go?!!!
    $('#test').editor({
    autoEnable: true,
    replace: true,
    enableUi: false,
    draggable: false,
    ui: {
        textBold: true,
        textItalic: true,
        textUnderline: true,
        textStrike: true,
        quoteBlock: true,
        fontSizeInc: true,
        fontSizeDec: true,
        listOrdered: true,
        listUnordered: true,
        length: true
    },
    plugins: {
        dock: {
            docked: true,
            dockToElement: true
        },
        placeholder: {
        content: '[Your comment here]'
        }
    }
});

If there is such documentation, I'd greatly appreciate a link. Thanks!

Documentation should explain the different builds of Raptor.

Also show all the basic options required, and 'gotchas' like nested blocks.

Enter keypress behaviour currently broken, and should behave as follows:

• If cursor is inside a block element
  • If cursor is at the start of a block element, insert options.enter before element and select start of it
  • If cursor is at the end of a block element, insert options.enter after element and select start of it
  • Else break the block element and set cursor to the start of the second element
• Else insert options.enter at cursor position and select start of it

@Petah, as discussed, I'm not 100% on this but it seems a good place to start looking.

Currently the editor grabs focus when enabled & replacing a textarea. This behaviour should be configurable.

I noticed something weird under FF. I manage to make any selected text into a link, outside the edit area.

• Christoffer Bubach

Addon actions must be constrained to acting within the editing element only.

I'm doing extensive testing of editors for a project aimed at novelists, and this editor has my attention, very beautiful and I can see how my users would enjoy it, and the Word post features are fantastic (and necessary as you know people will just copy and paste).

However, there is a serious issue with semantics. When I looked at the generated HTML after, say, posting from Word or applying positioning (such as centering). Divs are being used, and that can be an issue, especially in my environment (Joomla) which uses divs extensively for layout.

In addition, semantically speaking, paragraphs should be the default type, not divs. This is also a requirement for our publication standards.

Is there a way to override this so that I can set the paragraph tag as my default block type (like in TinyMCE and CKEditor)? Thanks!

Would be good to be able to instantiate the editor on an element within an iFrame.

Hi, it would be nice to have an exact listing on the website on which parts of the jQuery UI that is required for full operation - especially since the UI lib can be built from sizes of only 30kb up to a few hundred kb's.

Also the editor should detect missing features and give sufficient information about it. Right now it kind of works without the interaction part of jQuery UI - but behaves buggy without error or explanation. It was a trial & error run for me to figure out what parts of UI was needed.

Hi, when having the editor tied to a H1-tag it will wrap this text into a P-tag even if it's already a header. It will do this, no matter if I cancel the edit, or if I decide to edit another area it will still add P into the editable H1.

Add a button to remove all formatting from the selected text.

Hotkeys should be integrated with Raptor core, with UI / Plugins able to specify which hotkey combination triggers a given action.

Make the example, and test page enabled on the Github pages.

When a window resize leads to a change in the height of the dock, the dock spacer isn't resized as well. This may results in content that is not visible due to the dock is over the content, or that the dock spacer is visible when the dock shrinks.

This checkbox is confusing and seldom used.

It should be removed.

How can I tell the editor that I don't want a plugin (in my case the $.editor.plugin.emptyElement) to be loaded.

After saving, the unsaved edit warning displays in the bottom left.

When the editor is docked, path bar tooltips are displayed below the bottom of the screen.

Tooltips should display above the path bar when the editor is docked.

The latest build defaults to German upon init. I can manually switch the language to English, but I thought you should know.

EDIT: Um... HOW do I set the editor to default to English? I can't seem to find the parameter for it.

MORE INFO: This is REALLY odd - when I set the following parameter, the editor suddenly defaulted to English again:

i18n: true

That never happened with the earlier version... hmm....

Until one clicks into the editable area, the path tree is completely incorrect.

When element is created, but not added to document, Raptor refuses to work.

I've noticed that the {{limit}} variable in the translations isn't available and thus the statistics contains the sentence:

Content contains more than null characters and may be truncated

After editor instantiation (it renders on page) following code:

console.log( element );
console.log( element.getCleanHtml() );

causes following eror:

<...DOM Node representation...>
Uncaught TypeError: Object [object Object] has no method 'getCleanHtml' 

element is jQ-object for editor.

I init the editor with following code, it always shows the limit is 128, instead of 1024 I claimed in the options

<script type='text/javascript'>
    $('#binContent').editor({
            autoEnable: true,
            replace: true,
            enableUi: false,
            draggable: false,
            ui: {
                textBold: true,
                textItalic: true,
                textUnderline: true,
                textStrike: true,
                quoteBlock: true,
                fontSizeInc: true,
                fontSizeDec: true,
                viewSource: true,
                undo: true,
                redo: true,
                alignLeft: true,
                alignCenter: true,
                alignJustify: true,
                alignRight: true,
                textBold: true,
                textItalic: true,
                textUnderline: true,
                textStrike: true,
                textSuper: true,
                textSub: true,
                listUnordered: true,
                listOrdered: true,
                hr: true,
                quoteBlock: true,
                fontSizeInc: true,
                fontSizeDec: true,
                colorPickerBasic: true,
                clearFormatting: true,
                link: true, 
                unlink:true,
            embed: false,
                floatLeft: false, 
                floatNone: false, 
                floatRight: false,
                tagMenu: true,
                i18n: false,
                length: true,
            },
            plugins: {
                dock: {
                    docked: true,
                    dockToElement: true
                },
                placeholder: {
                    content: '[Paste your text here]'
                },
                length:{
                    length:1024
                }
            },
            disabledPlugins: ['unsavedEditWarning'],
            unloadWarning: false
        });
    </script>

Save event should fire after the server responds with success.

Currently the edit save method/event fires as soon as the button is pressed, so if the server failed to save the content, the editor will still set the original html to the new content, regardless of the response.

EDIT: This wasn't a bug, just bad documentation. I found out how to do it on my own. Request deletion of this issue.

Should set style="direction:{ltr/rtl}; on the editable element.

• Tag menu not updating depending on selection
• Attempting to change selection's tag does not work as expected

I'm now testing Raptor's behavior in forms, especially the data on submission. So far, it looks like the data is being passed. However, I found a very odd issue when examining the POST contents: an extra field called "tag" was added:

["tag"]=> string(1) "p" ["test"]=> string(29) "Testing Raptor on form submit" 

On a hunch, i turned off tagMenu and resubmitted. The result is what I would expect:

 ["test"]=> string(29) "Testing Raptor on form submit" 

For some reason, tagMenu is adding an extra field to the POST array. It could be the drop-down select that is used, but again, I cannot be sure.

For my purposes, this field would have no impact in the server-side model and would essentially just be discarded, but still it should be noted that there is some impact on POST.

When editor replaces textarea, canceling or saving should result in the text area being restored. Instead, the editor is removed and the user is left with nothing.

This one is a very small issue:

When I enabled the "tagMenu" option, the original drop-down tag selector didn't hide as it should behind the jQuery ui style (which it should); instead, the UI version appeared beneath it. Below is the rendered code, courtesy of Chrome's debug console:

<select autocomplete="off" name="tag" class="ui-editor-tag-select" style="display: none; ">
<option value="na">N/A</option>
<option value="p">Paragraph</option>
<option value="h1">Heading 1</option>
<option value="h2">Heading 2</option>
<option value="h3">Heading 3</option>
</select>

The first line is the problem - it turns out there is a style in use somewhere in my test site that probably is interfering. For this to work as intended, you have to add the CSS !important attribute to make sure this takes precedence. In my Chrome debug console, I made the following change:

<select autocomplete="off" name="tag" class="ui-editor-tag-select" style="display: none !important;"> 

And that fixed the issue. Not sure how/where to fix in the actual source code, though.

Create built package that is capable of detecting jQuery and including it if required, same for jQuery UI.

Hotkeys should only work when the editing element is focused.

When I paste some code into the editable area, then no change event is fired when I chose to insert the text in the paste dialog.

I'm trying to create a very simple implementation where I would like to show only the save button.

I got it almost working but I can't get rid of the path-footer div (classname ui-editor-path).

Is there a way to disable this?

$('#test').editor({
// which var do I need?
});

This issue was raised in the raptor-editor-rails repository ( PANmedia/raptor-editor-rails#1 ):

In /apps/assets/javascripts/application.js, if I include //= bootstrap, the Raptor Editor UI doesn't show. I don't know what you should do about it, but you might want to mention it in the documentation, or develop a workaround. Took me a while to narrow down the issue.

I can also confirm this. The load order makes no difference and there are no console errors. The gem installed for the Bootstrap is bootstrap-sass.

I suggest using short versions instead of full english string before the translations as one of many steps towards a smaller code-base. or maybe the localization functions can look up the string in the english array and use corresponding array[number] for selected language?

Trying to build raptor using the source I pulled from GitHub on OS X 10.6.8 (Snow Leopard). Following the build instructions, I got Phing installed and ran the build command 'phing build'. However, I get the following error:
PHP Parse error: parse error in /Users/mbauer/Documents/development/PANmedia Raptor/classes/TranslationCheckTask.php on line 92

I am probably missing some dependency, though I am not sure what.

I init the editor with following code, it always shows the limit is 128, instead of 1024 I claimed in the options

<script type='text/javascript'>
    $('#binContent').editor({
            autoEnable: true,
            replace: true,
            enableUi: false,
            draggable: false,
            ui: {
                textBold: true,
                textItalic: true,
                textUnderline: true,
                textStrike: true,
                quoteBlock: true,
                fontSizeInc: true,
                fontSizeDec: true,
                viewSource: true,
                undo: true,
                redo: true,
                alignLeft: true,
                alignCenter: true,
                alignJustify: true,
                alignRight: true,
                textBold: true,
                textItalic: true,
                textUnderline: true,
                textStrike: true,
                textSuper: true,
                textSub: true,
                listUnordered: true,
                listOrdered: true,
                hr: true,
                quoteBlock: true,
                fontSizeInc: true,
                fontSizeDec: true,
                colorPickerBasic: true,
                clearFormatting: true,
                link: true, 
                unlink:true,
            embed: false,
                floatLeft: false, 
                floatNone: false, 
                floatRight: false,
                tagMenu: true,
                i18n: false,
                length: true,
            },
            plugins: {
                dock: {
                    docked: true,
                    dockToElement: true
                },
                placeholder: {
                    content: '[Paste your text here]'
                },
                length:{
                    length:1024
                }
            },
            disabledPlugins: ['unsavedEditWarning'],
            unloadWarning: false
        });
    </script>

Why is it calling:

http://www.raptor-editor.com/logo/0.0.3?enableUi=true&enablePlugins=true&disabledPlugins=%5B%5D&ui=%7B%7D&t=1339976938906

when i try to load an editor, Every time you edit a content it loads that link and returns a 16x16 image. What's the point?