panmedia / raptor-editor Goto Github PK
View Code? Open in Web Editor NEWRaptor, an HTML5 WYSIWYG content editor!
Home Page: www.raptor-editor.com
License: GNU General Public License v3.0
Raptor, an HTML5 WYSIWYG content editor!
Home Page: www.raptor-editor.com
License: GNU General Public License v3.0
Documentation should explain the different builds of Raptor.
Also show all the basic options required, and 'gotchas' like nested blocks.
Currently the editor grabs focus when enabled & replacing a textarea. This behaviour should be configurable.
The text alignment plugin should have an option to use classes instead of inline styles.
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.
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?
Why is it calling:
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?
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.
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!
EDIT: This wasn't a bug, just bad documentation. I found out how to do it on my own. Request deletion of this issue.
When element is created, but not added to document, Raptor refuses to work.
When the cursor is within a list and the user presses tab
/ shift + tab
, the list should be indented / unindented accordingly.
Should set style="direction:{ltr/rtl};
on the editable element.
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.
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.
After saving, the unsaved edit warning displays in the bottom left.
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?
});
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....
Add a button to remove all formatting from the selected text.
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.
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!
Create built package that is capable of detecting jQuery and including it if required, same for jQuery UI.
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.
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>
Would be good to be able to instantiate the editor on an element within an iFrame.
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.
Would be good to add this behaviour while support for older browsers is implemented.
Hotkeys should only work when the editing element is focused.
How can I tell the editor that I don't want a plugin (in my case the $.editor.plugin.emptyElement) to be loaded.
Enter keypress behaviour currently broken, and should behave as follows:
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.
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.
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.
@Petah, as discussed, I'm not 100% on this but it seems a good place to start looking.
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.
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.
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'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.
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!
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.
Until one clicks into the editable area, the path tree is completely incorrect.
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
I noticed something weird under FF. I manage to make any selected text into a link, outside the edit area.
Addon actions must be constrained to acting within the editing element only.
Make the example, and test page enabled on the Github pages.
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>
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.
Hotkeys should be integrated with Raptor core, with UI / Plugins able to specify which hotkey combination triggers a given action.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.