html5cat / redactor-js Goto Github PK

[no longer maintained] Code mirror of a jQuery based WYSIWYG-editor. I'm not the author, author's website: http://redactorjs.com/

CSS 28.68% PHP 0.93% JavaScript 70.40%

redactor-js's Introduction

redactor-js

Repo not maintained. Proceed with caution or refer to http://imperavi.com/redactor/

##Happy to transfer ownership if you want to maintain a fork.

jQuery based WYSIWYG-editor, official author's website: http://redactorjs.com/

This is a codebase mirror hosted here for your, my dear Githubbers', convenience.

If you found and issue, please submit it here: http://imperavi.com/support/

Screenshot

Authors

Developers

Aleksey Baranov and Imperavi LLC. imperavi.com

Optimization and improvement

Сергей Демчук sergiusd.ru
Павел Ясинский

####Localization

Brazilian portuguese — Guilherme Gondim
Ukrainian — Ганич Тарас alexa-cms.com
Polish — Юрий Сладковский its.sladkowski.com
Latvian — Максим Солдатёнок maksold.com
German — Volodymyr Atapin

License

Starting with version 7.6.2 redactor-js is licensed under Creative Commons Attribution-NonCommercial 3.0 license

For commercial use please buy license here: http://redactorjs.com/ or use earlier version.

redactor-js's People

Contributors

Stargazers

Watchers

Forkers

maheshbabu volpeo sammylin nymezide itamar zoghal amystephen cui-liqiang eazuka foundry-modules contextworks rskumar samccone lucasnpinheiro radiosilence gstan07 roscadaniel sashka benoit-ponsero x13enos vyrus itkin redtree basex coffeebite mazovka dmitrymomot fylhan xgenvn jacman501 mogetutu vovanx timofeimih mul14 gvsrepins fdv losingle ludmiloff mkolodny scr34m lexich tdchien trevoro bitsofalex jamalsa ademaro alex-pex fadhlirahim lightyrs ze00ro hubgit browsnet robirobi einarhuseby eos87 ivanmorales sajus raulukkin chrisjdavis lastcanal tommitchell un33k laravelbook baascommandeur nguyenlocduy sandeepone schnegg ksergiy shelakel epireve luizcarvalho ezhkov abpin achingono stouffi allanfreitas ajeliuc duellsy mikodes jentanbernardus gleez tunght13488 piyumi-gunarathna lakeron tjoen hi4me firatagdas raman-kapanets aburan28 psdcoder johntrowabarton angelbotto rgrigga jhuriez saliver marazmiki neuroxik navinnair e11it dingk-r

redactor-js's Issues

can't delete heading formating

Try to delete first h3 header on your website title page example. it extends the h3 style to the end of next paragraph

toolbarExternal with multiple editors

When having multiple instances of the redactor editor on a page and using a single toolbar through the toolbarExternal option, there are a few cases where the wrong editor gets focus when using the toolbar.

I have discovered these cases so far, where always the last editor instance is affected and not the one where I was currently editing:

Inserting an image inserts into the last editor on the page
Toggling HTML view always toggles the last editor on the page

Feature: remove redactor instance

I would like to be able to remove (or hide) a redactor instance and return an element to it's original state

e.g.

$(el).data("redactor").remove();

IE8 and Firefox 10 have different behavior with the Style (Paragraph) button.

To reproduce the issue on each browser:

Go to http://redactorjs.com

In the Redactor editor, highlight: Well, one day I went up in a balloon and the ropes got twisted

In the toolbar, click the ¶ button and choose code

Click the ¶ button again and choose Header 1

In IE8, the code style and the Header 1 style will be applied to the selected text:

`Well, one day I went up in a balloon and the ropes got twisted`

In Firefox 10, the Header 1 style will be applied to the selected text:

Well, one day I went up in a balloon and the ropes got twisted

Which is the desired behavior?

indent and outdent do not working in ff10

when I change code by hand from p style="margin-left: 400px"> to p style="margin-left: 400px ! important;"> it work ok.

Incorrect document structure

Thank you for the great plugin!

Reg the issue: I am trying to edit a html document with meta and style tags with iframe option. I rendered full html document inside a textarea and initialized redactor. After initialization, iframe editor DOM structure is incorrect.

Ex:-

Textarea content:

<textarea class="messageContent">
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <meta name="viewport" content="width = device-width, user-scalable = no">
                <title>Page Title...</title>
                <style type="text/css">
                    body {
                        margin: 0;
                        padding: 0;
                    }
                </style>
            </head>
            <body>
                <p>Page Body...</p>
            </body>
        </html>
    </textarea>

Iframe (added by the plugin) content:

<iframe style="width: 100%; height: 186px; overflow: auto;" frameborder="0" class="redactor_messageContent">
<html>
<head></head>
<body contenteditable="true" dir="ltr">
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <meta name="viewport" content="width = device-width, user-scalable = no">
                <title>Page Title...</title>
                <style type="text/css">
                    body {
                        margin: 0;
                        padding: 0;
                    }
                </style>
                <p>Page Body...</p>
</body>
</html>
</iframe>

Issue: meta, title and style are moved into body.

Please let me know if there is a way to edit full html document with iframe.

Problem when editing an image

The problem is that if you have a scrollbar visible and do the following, the scrollbar will disappear.

Insert image
Click it, save
Click it again, save
Scrollbar gone

http://redactorjs.com/docs/examples/

Tested with Chrome 21, Firefox 14 and IE 9

EDIT:
If I remove this line https://github.com/dybskiy/redactor-js/blob/master/js/redactor/redactor.js#L2321 the scrollbar doesn't disappear.

Add custom element to 'formatting' dropdown

Finding it tricky to add an additional block element to the formatting dropdown in the toolbar.

I can edit the redactor.js directly to add a new element (an <h5> for example) but I'd rather not influence the core code in this way.

Does anyone know if new elements can be aded to the formatting dropdown through the config?

Ideally, I'd like to be able to add custom elements such as:
'small print' = <div class="smallprint"></div>

Any ideas/pointers greatly appreciated.

Ability to move Image anchor points.

There is an image in the editor area, and I can resize it with the mouse, but there seems to be no way to either "select" the image or to move it's "anchor" in the case of floated images.

Redactor inserting spans with inline styles

Redactor appears to be occasionally inserting tags with inline styles:

We could really do with an option to prevent this from happening?

(using chrome 26)

Using redactor with Zemanta widgets / external update problem

I'm trying to use Zemanta's widgets and the Redactor html editor together.

The problem is getting Zemanta to find Redactor's iframe/content and be able to send updates to it after clicking one of the widgets.

Redactor creates an iframe but keeps the real textarea hidden behind the scenes i suppose sending updates between but I can't figure out how to update both at once. If I update the textarea using it's ID it works but I don't see it in Redactor unless I click code view, and if I use the iframe class I see it in redactor but it doesn't make the changes inside the textarea and when I save I get nothing.

Any ideas?

http://stackoverflow.com/questions/11348914/making-redactor-and-zemanta-play-nice

Content jumps to the top on inserting a link

If you add a link with the add link button on the editor, the content jumps to the top when the modal is closed. This happens when the autoresize is set to false.
Seen in chrome v23

Markdown implementation

Are there any plans for Markdown implementation?

This is how I see it:

There are two options:

Plain Markdown,
Parsed Markdown that's just HTML (there are few Markdown parsers in JavaScript already);

If user clicks, lets say, "bold" button when it's option #1 -- selected text is wrapped in "**". If he clicks the same button when #2 option is selected, then the same happens, plus, new text is parsed and displayed.

Are there any plans for it? Maybe to create plugin that do it?

Using z-index is not a good idea

Hello,

I'm not sure using z-index for buttons is necessary.
This make bad behavior, has you can see here:

This is one example but i often have problems like that with redactor.

Thanks

Incorrectly marked "active buttons" due to "ul" element outside of the editor

Hi guys!

Really liking Redactor - have just implemented it on a client site on beta, and they're very very happy (so now we'll be happily buying a license).

The only bug we came across was that the editor itself is somewhere within a ul element. So when the editor loads, the "unordered list" button is marked as active. This is incorrect - the editor is inside a ul, but there is no actual ul inside the editor's editeable area. This all rolls down to the observeFormatting function, where it iterates over the activeButtonsStates elements, and determines that we have some ancestor with that element. But, I believe this should not check all ancestors, but only all the way up the the editor wrapper itself.

This is probably going to be a pretty easy fix, and I'm happy to make it, but I wanted to see if any core devs had any thoughts about this - perhaps it's by design or something of that sort.

Thanks!

event.originalTarget.getElementsByTagName is not a function

Hey guys,

I've been trying to implement redactor in a test site, and am running into a js error:

uncaught exception: TypeError: event.originalTarget.getElementsByTagName is not a function

Line 0

It seems redactor loads just fine, I can apply different formatting. However when I click into the redactor text field, and begin typing, I get one js error for every keystroke. I am using a custom toolbar, but I get the same js error whether I use the default toolbar or my custom toolbar.

My OS is ubuntu 12.04.

I'm only experiencing the error in Firefox 13. (only version of FF I've tested in). Chrome 19 seems unaffected by the error.

Undo required two operations in IE8/Windows

Redactor seems to delegate the undo/redo operations to the underlying textarea; certainly in recent Safari/Chrome on OSX, 'right click > undo' works as expected.

On IE8/Win, every other undo operation seems to have no effect, so I need to undo twice, to remove one character. This is a poor explanation, so I've recorded this screencast, which demonstrates the issue:

http://leon.sandbox.frm.io/redactor-undo-bug.mp4

HTML Button doesn't show up

Downloaded the latest and the HTML button just plain doesn't show up. Ideas? Your site examples work fine.

Mac OSX Mountain Lion
Chrome 21

"Read more" button

Exist way added to toolbar button by which to content add some special commented text like

air:true failure with jquery 1.9.0

There is an error when text has selected in redactor' textarea.

Uncaught TypeError: Cannot call method 'apply' of undefined
$.event.special.textselect.handler
st.event.dispatch jquery.js:2
y.handle

with jquery 1.8.2 everything in OK

MacOS 10.8.2/Chrome 24.0.1312.56

Double paragraph desired not desired

Editor automatically remove double paragraph (when enter in tapped two times in a row).

Our client don't think it's desired behavior. Could you remove this feature or provide an setting for that?

Documentation

Hi and thx for an awesome editor.

Is there any more docs about image/file uploads? I can't find anything about organizing images in folders.

I'm also having some problem with displaying images. I only uses the thumbnails.

Is the a filebrowser built in? Like the one for images.

Wrong/unoptimized HTML generation

Somehow the redactorjs is creating wrong and unpotimized html. I am unable to reproduce the same issue, but this is what I found.
I selected the text, click the Bold button, and when I checked the code, the structure was:
Some Text is placed here
while, the correct should be:
Some text is placed here

I remember, I clicked only one time on bold button.

convertLinks only converts URLs when you hit the 'enter' key

If you set the 'convertLinks' option to true, it does convert URLs to links automatically, but only if you press the enter key. It seems like this should happen at least as soon as you hit the space bar.

Потеря фокуса в blockquote

Замечен баг. Пишем текст в редакторе без абзацев, выделяем, ставим ему Quote и пытаемся сделать новый абзац в общем потоке, в итоге мы остаемся все время в пределах цитаты, клик мышки в пустую область также не дает нам выйти из цитаты.
Проверялось в Firefox, Chrome.
Спасибо.

formattingTags setting not working?

Hi, I have been testing redactor in a project I am working on and am having difficulty getting the formattingTags setting to work.

Below is the code I am using:

$('#redactor-content').redactor({
focus: true,
wym: true,
formattingTags: ['h1', 'h2'],
});

However when I click on the formatting dropdown it still shows all the original options.

Downloading a fresh copy from this repo, editing index.html and adding the formattingTags setting still reproduces the issue. Anyone else having similar problems?

Styling inside `pre` tag shouldn't be allowed.

Create a line and make it italic.
Press return and set style to Code.
Type something then press enter.

Actual: A new pre element is added.

Expected: A newline should be added inside the pre element.

Also, when working within a pre element, all styles should be disabled.

Why converting to lower case ?

Hello,

I saw in the code you convert the html to lower case only with IE. Why ?

In most of case having uppercases in the text is usefull for the user...

I think some two lines can be removed:
https://github.com/dybskiy/redactor-js/blob/master/js/redactor/redactor.js#L733

Redactor inserting font tags inside unordered lists

Using Chrome 26.0.1410.65, after inserting an unordered list with some list items, the source generated looks like this:

<ul>
  <li>
    <font color="#404040">fdsafdsafdsa</font>
  </li>
  <li>
    <font color="#404040">fdsafdsafdsa</font>
  </li>
</ul>

Obviously that font tag shouldn't be there.

Ability to Customize Image Margin

It would be nice to have the ability to customize image margins on floats. The code currently adds inline styling to float the images and add margin: 'float': 'left', margin: '0 10px 10px 0'

The problem I'm having is that those numbers are hard-coded in with no way to modify them outside of editing the source code. I've added the following to the imageSave method in order to use a css class to style the content instead of inline styles.

if (floating === 'left')
{
  $(el).css({ 'float': 'left', margin: '0 10px 10px 0' }).removeClass().addClass('alignleft');
}
else if (floating === 'right')
{
  $(el).css({ 'float': 'right', margin: '0 0 10px 10px' }).removeClass().addClass('alignright');
}
else
{
  $(el).css({ 'float': 'none', margin: '0' }).removeClass().addClass('alignnone');
}

I would like to see in future versions, either the option to specify the margin that are used in a config files, or a move to classes which would allow for the stylesheets to handle appearance.

<pre> formating

We have some troubles with < pre > formating. Redactor removes empty lines and gives on the beginning each line spaces.

Input:
< pre >This
is
my code< /pre>

Output
< pre >This is my code< /pre>

Input is:
< pre >This

my code< /pre>

Output
< pre >This< br / >
< br / >
is< br / >
< br / >
my code< /pre>

Polish special characters causing text formatting on Windows

On polish keyboard when one click Alt+l, it is expected that ł character will be printed. For now the superscipt is applied to text. Pleas also check other polish keys: (Alt+zolcesaxn).

Redactor Modal

Original
$('#redactor_modal').css({ position: 'fixed', top: '50%', left: '50%', width: width + 'px', height: 'auto', minHeight: 'auto', marginTop: '-' + (height+10)/2 + 'px', marginLeft: '-' + (width+60)/2 + 'px' }).fadeIn('fast');

Suggest
$('#redactor_modal').css({ position: 'fixed', top: '25%', left: '50%', width: width + 'px', height: 'auto', minHeight: 'auto', marginTop: '-' + (height+10)/2 + 'px', marginLeft: '-' + (width+60)/2 + 'px' }).fadeIn('fast');

Problem
When put in div . the popup become to down .so i cannot click the upload button.

Improvements to image resizing, editing, moving

RedactorJS is absolutely amazing - by far the best and simplest WYSIWYG editor. Thank you so much for developing it!

There is one fairly important issue that I have been struggling with - which is image manipulation, particularly in webkit.

The resizing functionality is great but the lack of the ability to move images in webkit is slightly frustrating. Would it be possible to change the resizing code so that it is more similar to this?

http://ghosted.it/demo

The advantage is that resizing is done by dragging the corner which is more intuitive and it leaves the standard contenteditable functionality to be able to drag the image around the page - I realise this is far from perfect in webkit because it does not show the cursor but it is better than nothing. The ability to adjust the float by clicking the left/right arrow overlay on the image is also quite nice.

Finally, it would also be nice if it were more easily possible to replace the image editing modal window with a custom one. We have replaced the image insert modal by overriding the 'image' button in the toolbar (I'm not sure if this is the way you are supposed to do it) and it would be great if we could replace the image edit dialog in a similar manner.

THANKS

Keyboard shortcuts (CMND/CONTROL/OPT/ + b/i) not working on Mac

Hi,

First of all, great work. I'm in LOVE with the tool. It's perfect .. except, we have one small issue.

For some reason, whenever you're editing on a Mac (Chrome browser) and want to use bold shortcut, it doesn't work. There don't seem to be any Javascript errors, at least not in the Chrome inspector tool.

Not sure if I'm doing something wrong, but I think it worked the first time.

Webkit browsers insert DIV after closing UL

Normally when creating a new line by pressing enter, a new paragraph is created.

If you press enter twice after an unordered list to create a new line, Webkit browsers will insert a DIV element instead of a paragraph.

There is a fix for this in the formatNewLine function, however if the element that you transform into the editor (in my case a div) already has a class name, the function won't work because the class name no longer matches in this line:

if (parent.nodeName === 'DIV' && parent.className === 'redactor_editor')

Changing this line as below will fix this issue:

if (parent.nodeName === 'DIV' && parent.className.indexOf('redactor_editor') >= 0)

There is also another issue in that depending on the css that the editor is using, Webkit browsers may insert more than an empty DIV. In my case the line below is inserted after a closing UL instead:

<div><span style="line-height: 18px;"><br></span></div>

Therefore this line never matches and the cleanup fails:

if (element.get(0).tagName === 'DIV' && (element.html() === '' || element.html() === '<br>'))

I don't think it's really necessary to check the contents of the new line, so perhaps we can safely replace this line with the code below:

if (element.get(0).tagName === 'DIV')

Pasting into empty redactor from Chrome 24 creates nested <p> tags

Chrome was recently updated to version 24 and we've noticed that text copied from styled sources (the web, emails, word docs) and pasted into an empty redactor creates nested <p> tags.

_expected result from pasting:_

<p>pasted content</p>
<p>from an outside source</p>

_result from chrome 24:_

<p>
    <p>pasted content</p>
    <p>from an outside source</p>
</p>

You can see this in the screenshot below. This was taken from the home page

XSS Correction in your doc

Hi,

Today i add some cool guys playing with redactorjs on my website. They inject an XSS and i paste you this php code.

function sanitize($text) {
        $attrs = array('onabort', 'onactivate', 'onafterprint', 'onafterupdate', 'onbeforeactivate', 'onbeforecopy', 'onbeforecut', 'onbeforedeactivate', 'onbeforeeditfocus', 'onbeforepaste', 'onbeforeprint', 'onbeforeunload', 'onbeforeupdate', 'onblur', 'onbounce', 'oncellchange', 'onchange', 'onclick', 'oncontextmenu', 'oncontrolselect', 'oncopy', 'oncut', 'ondataavaible', 'ondatasetchanged', 'ondatasetcomplete', 'ondblclick', 'ondeactivate', 'ondrag', 'ondragdrop', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onerror', 'onerrorupdate', 'onfilterupdate', 'onfinish', 'onfocus', 'onfocusin', 'onfocusout', 'onhelp', 'onkeydown', 'onkeypress', 'onkeyup', 'onlayoutcomplete', 'onload', 'onlosecapture', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmoveout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onmove', 'onmoveend', 'onmovestart', 'onpaste', 'onpropertychange', 'onreadystatechange', 'onreset', 'onresize', 'onresizeend', 'onresizestart', 'onrowexit', 'onrowsdelete', 'onrowsinserted', 'onscroll', 'onselect', 'onselectionchange', 'onselectstart', 'onstart', 'onstop', 'onsubmit', 'onunload');
        $tags = '<code><span><div><label><a><br><p><b><i><del><strike><u><img><video><audio><iframe><object><embed><param><blockquote><mark><cite><small><ul><ol><li><hr><dl><dt><dd><sup><sub><big><pre><code><figure><figcaption><strong><em><table><tr><td><th><tbody><thead><tfoot><h1><h2><h3><h4><h5><h6>';
        return preg_replace('/<(.*?)>/ie', "'<' . preg_replace(array('/javascript:[^\"\']*/i', '/(" . implode('|', $attrs) . ")[ \\t\\n]*=[ \\t\\n]*[\"\'][^\"\']*[\"\']/i', '/\s+/'), array('', '', ' '), stripslashes('\\1')) . '>'", strip_tags($text, $tags));
}

instead of just allowing wanted tag :)

What do you think about this?

Keyboard events don't appear to unbind when destroying the editor.

in airmode, when you select a text with keyboard (shift+arrow), it doesn't display the air bar

autosave with additional parameters?

When using the autosave option... is there a possibility for adding additional parameters to the POST request?

emptyHtml value is submitted to the server so textarea is never empty

It looks like emptyHtml value is always passed to the underlined textarea so it's causes troubles to validate field on server side cause it looks like its not empty, however user did not put any content into editor.

How can I add a dropdown button as a plugin

Hi,
I'm trying to add a new button of special characters into redactor as a plugin.
I've got an array with the name of the char and it's value but I couldn't find any kind of example or guidance how to do it.

Any kind of help is welcome,
Itamaryu

support for external toolbars

Hello, we recently found your editor and it looks great! Do you plan on supporting external toolbars in the future? Or letting the user specify where to render the toolbar to? I would imagine the api would look something like:

$('textarea').redactor({
    toolbar: {
        type: 'custom',
        renderTo: $('.someExternalContainer')
    }
});

We currently use TinyMCE with this kind of setup, but really like the simplicity of your offering!

onChange event is not triggered on underlying textarea

After modifying text in redactor.js, and after focus is lost, the onChange event is not triggered on textarea, the redactor.js has been created on.

Link insertion bug

Inserting a link always appends a 'A' element to the current selection, regardless of whether or not the current selection is already a link.

In the insertLink method:
if (sel.toString() === '') { ... }
should be:
if (sel.toString() !== '') { ... }

Broken proportions of the image

By increasing the picture when one side of the picture reaches the boundary of the editor, the second continues to increase, resulting in the broken proportion.

Keyboard Shortcuts Methods don't care about forbidden tags in allowedTags param

$('#redactor').redactor({
  allowedTags: ['p']
});

Init redactor like above and press "Ctrl + k" which will create an ol-tag - which should not be allowed 'cause we just allowed p-elements.

Would be awesome to have an option to define which shortcuts you want to be available.

Expose Redactor constructor

How do you feel about exposing the Redactor constructor through either a global or perhaps as a property on $.fn.redactor? I was recently working on a project where being able to modify setDoc was a preferable solution but doing so was difficult due to the privacy of the constructor. Thoughts?

in airmode when you click outside the redactor, the air bar doesn't disappear

In airmode when you click outside the redactor, the air bar doesn't disappear like when you click inside the redactor region.

html5cat / redactor-js Goto Github PK

redactor-js's Introduction

redactor-js

Repo not maintained. Proceed with caution or refer to http://imperavi.com/redactor/

Screenshot

Authors

Developers

Optimization and improvement

License

redactor-js's People

Contributors

Stargazers

Watchers

Forkers

redactor-js's Issues

Well, one day I went up in a balloon and the ropes got twisted

Well, one day I went up in a balloon and the ropes got twisted

Recommend Projects

Recommend Topics

Recommend Org

`Well, one day I went up in a balloon and the ropes got twisted`