samclarke / sceditor Goto Github PK

The on/off state of the selected format is missing from the UI ... It would be nice if the currently selected formatting was reflected in the on/off state of their respective buttons.

Create a better plugin system.

Update BBCode plugin to use the new plugin system.

If I have other input field eg:

Name:

The form does not display the firefox or chrome required popup.
If I don't load the sceditor js code the popup is displayed if I leave this entry empty when submitting

Add more unit tests for BBCode as well as adding unit tests for the DOM class and possibly the range class.

Is it possible to map "line breaks" in the editor to a bbcode tag?
Or to disable the new line after tags like ul, li, ol...

I'm having some trouble parsing the the bbcode in the backend.
Some formatting tags add a new line after it automatically (li for example), and there is no distinction between this new line and the user's line break.

I understand that adding a new line after ul, li makes the bbcode more human readable, but it's complicated to have the same symbol with 2 different semantic meaning, depending on it's position.

Add an option to enable/disable emoticons while editing.

Hi,
There is a non useful space at the left of the editor text area. this space disappear when resizing the page.
Please see above snapshots:

LTR page

RTL page:

I'm using the v 1.4.1-dev and those options:

plugins: 'bbcode',
width: '90%',
dateFormat: "day-month-year",
autoExpand: false,
resizeEnabled: false,

Thanks a lot. :)

I tried to capture data using updateTextareaValue to send the value via ajax and preview in a dialog (before submitting the form). UpdateTextareaValue function does not work. Is it likely that I'm doing something wrong? How do I capture the value of the textarea to preview before sending? thanks

Greetings,

here are some modifications I made so SCEditor would work on RTL sites, still I have one problem which working on that text area resizing should be at the left-down corner.

from file: jquery.sceditor.default.min.css

html,body, p, code:before,table
{
direction:rtl;
margin:0;
padding:0;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
color:#111
}

from file: default.min.css

.sceditor-container,.sceditor-container div,div.sceditor-dropdown,div.sceditor-dropdown div{direction: rtl; padding:0;margin:0;z-index:3}

.sceditor-container iframe,.sceditor-container textarea
{
border:0;
outline:0;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
color:#111;
padding:0;
margin:5px;
resize:none;
background:#fff
}

also flip the famfamfam.png grip's icon horizontally

a live site

http://onyx-sy.net/SCEditor/example/

Hi,
When the "RTL" option is set to "true" the Left-To-Right is not working and the cursurs stick to right when the LTR icon is clicked.
I'm using the bbcode plugin with SCeditor v1.4.1dev
Thanks a lot

HI,
When the option RTL is set to True, the small grip which allows the editor to be resized should be at the bottom left-hand corner, but it's always at the bottom right.
I'm using the bbcode plugin with SCeditor v1.4.1dev
Thanks a lot.

Nevermind. I was wrong

Add an option to allow only plain text to be pasted into the WYSIWYG editor.

Would be a possible solution to #30

When you paste text from MS word in to the wysiwyg editor and try to save or toggle to source mode, you will get a the following error in the console.

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

to reproduce
0) Use FF 16 or 15, maybe others

1. Used the bbccode editor on your demo site
2. Pasted in the text, This is a Test ,from word 2003
3. Select the view source icon,
4. It will not switch due to the above error

Hi,

I don't know if it's a feature request or a support request but I need a way to output list item in the following format:

Unordered list:

[list]
[] Item 1
[] item 2
[/list]

Ordered list:

[list=1]
[] Item 1
[] item 2
[/list]

This format is in use in phpbb boards...
(Moreover : http://www.bbcode.org/reference.php)
I know SCE support this format as input but it doesn't seems to support it as output. (It would be great if it was...)
At this time SCE output this format:

[ul|ol]
[li] item 1 [/li]
[li] item 2 [/li]
[/ul|ol]

Do I need to write a custom button for this purpose ? (if yes, a little help would be greatly appreciated because it's nested, more complicated than a simple tag)

Thank you indeed.

hi, this is the problem:

$("textarea").data("sceditor").val();

gets html value if inSourceMode() is true , and gets BBCODE value if inSourceMode() is false

cya

Rewrite the BBCode parser to allow for finer control of output as well as allowing self closing and non-closing tags.

Hello Sam!

Another bug...

[code][quote]BUG HERE[/quote][/code]

Switching source mode - visual mode - source mode , quote disappear...

The JS file is quite hard to edit, is it possible for you in a future version to have it get the emoticon list from a small html file? That way it becomes thousands of times easier to edit and when you update SCE i wouldn't have to re-do my changes? It would make it more user friendly. Keep up the great work!!

I don't see a way to do this when defining emoticons, but it would be good to have a tooltip: option for them as we do with the rest of the editor buttons.

Feature request:
Either add support for or safeguard against re-initialization. Currently re-init of SCEditor brakes it.

Say I want to have a button on comments on my website saying "Quote" and if someone presses it, it then inserts the text from that comment wrapped in quotes tags into the editor, is that easily possible?

I'm getting an error that wasn't there before - when toggling between source and html mode, base.selectedRange() is called and sel evelutes to null as nothing is selected and code breaks

Update 1:
I've tracked it down to new base.updateOriginal() function, base.val() seems o trigger this error

Update 2:
I'm not sure what's up with this, take a look:
http://img826.imageshack.us/img826/3037/croppercapture42.png

Nice library.

But the attribute "required" on textarea is not supported as well, this example show what happens on FF or Chrome :

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="minified/jquery.sceditor.min.js"></script>
  <link rel="stylesheet" href="minified/jquery.sceditor.min.css" type="text/css" media="all" />
  <script>
            $(document).ready(function() {
                $("textarea").sceditorBBCodePlugin({
                    style: "minified/jquery.sceditor.default.min.css"
                });

        $("textarea").show();
            });
  </script>
</head>
<body>
  <form action="post.html">
    <textarea required="required" name="content" style="height: 300px; width: 400px;"></textarea>
    <button type="submit">Send</button>
  </form>
<body>
</html>

Open word. Write anything as long as it has, at least, 3 paragraphs (must have text in each paragraph).
Open http://www.sceditor.com/ in firefox.
Copy the contents you wrote in word into the editor using ctrl + C + ctrl + V.

When you try to switch to to source code mode you get the following exception:
[23:19:57.503] NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle] @ http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:4

I don't know the real reason for that but you might know it.

If you write:

[ol]
[li]dw[/li]
[li]
[ol]
[li]hi[/li]
[/ol]
[/li]
[li]elem[/li]
[/ol]

You get:

<div>   </div>
<ol>    <li>dw<br></li> <li><br>    <br></li><ol>   <li>hi<br></li> </ol>   [/li]<br>   <li>elem<br></li>   </ol>

(in a more readable way)

<div>   </div>
<ol>
    <li>dw<br>
    </li>
    <li><br>
    <br>
    </li>
    <ol>    
        <li>hi<br>
        </li>
    </ol>
    [/li]<br>
    <li>elem<br>
    </li>
</ol>

Tested on the latest SCE (snapshot taken about 14 hours ago). SCE version 1.4.1.

Do you think you can fix this in the next 3 months?

Instead of defining tags to go from wysiwyg to source, it would be very nice if it could just take the HTML entered in the bbcode definition and use that to build the source.

This would significantly simplify adding custom bbcodes. With the need for tags, it requires us to create a regular expression on the PHP side to go from HTML to build a tag definition automatically, since custom bbcodes are created by administrators with just the format and HTML replacement.

http://youtu.be/KVugsBipaMA

not work...

in my case, detect and transform youtube bbcode on server side.

I use youtube full link for this.

could add a setting for these cases?

Ex:

$("textarea").sceditorBBCodePlugin({

youtubeParseOutput : false,

});

Improve table editing support.

Should make this a plugin as tables are quite likely to be removed (a lot of BBCode parsers don't support them).

Add an option to disable width or height resizing without disabling the other.

I think the documentation should also show the API.

The API that is here:
http://www.samclarke.com/2012/04/sceditor-documentation/
Should be moved to the new documentation file and adapted to the new version, don't you think?

Update the docs to reflect all recent changes to the editor as well as new features with the 1.4.0 release.

I saw 1.4.0 is out, i use for now 1.3.5 but i searched the changelog for my issue and can not find a "bugfix" so i think this is not fixed right now.

If you add the editor within a jquery ui dialog. and have set it to modal. there will be an overlay with z-index >= 1000

You can use the sceditor wthin normal mode but in source mode you can not type because the overlay hide the textarea.

My bugfix is simple:

After the lines
$editorContainer = $('<div class="sceditor-container" />')
.width($textarea.outerWidth())
.height($textarea.outerHeight())
.insertAfter($textarea);

I just added:

var zindex = $('.ui-widget-overlay').css('z-index');
if (parseInt(zindex) > 0) {
$editorContainer.css('z-index', parseInt(zindex)+1);
}

This will add a z-index to the hole editor container which then allows editing within source mode too.

I've had a few of my members (including myself) run into some weird behavior when pasting text from Word or similar that includes align=center and code tags. It seems to create too many tags when using centered text. See below screenshots:

http://puu.sh/1lYJF (Normal mode)
http://puu.sh/1lYK8 (View Source mode)
http://puu.sh/1lYLc (How it should look in normal mode)
http://puu.sh/1lYLX (How it should look when viewing source)

Note that I am loading jQuery twice -- the AJAX PM Notification plugin requires an older version, but I have "Use jQuery No Conflict Mode?" set on in SCEditor's settings, so surely this shouldn't cause a problem?

several times, is more comfortable and easy to manipulate partial WYSIWYG editor mode than full WYSIWYG editor mode...

for example when you need to split a quote tag in two parts in WYSIWYG editor mode..

image below is example of partial WYSIWYG editor mode

http://i.imgur.com/09J7W.png

(in vbulletin: ckeditor)

http://i.imgur.com/LsmzG.png

(in xenforo: tinymce)

if possible create option (on/off (use or no use)) partial WYSIWYG editor state I'll be grateful.

or this project ramification containing bbcode editor mode and partial WYSIWYG editor mode. since this should significantly simplify the code and will also facilitate the additions of buttons in the editor.

sorry to be asking absurd things.

Thanks...

Add keyboard shortcut support for commands.

Greetings
I just made an Arabic file language from template.js would be happy if it can be added to the list of language files:

/**

• @author Atramez_Zeton http://onyx-sy.net

• @license MIT
  */
  (function ($) {
  'use strict';

  // Replace with the language code, e.g. no, fr, en, ect.
$.sceditor.locale["ar"] = {

  // Original string is on the left, place the translation between
  // the quotes on the right
  "Bold": "عريض",
  "Italic": "مائل",
  "Underline": "خط من الأسفل",
  "Strikethrough": "خط في المنتصف",
  "Subscript": "حرف منخفض",
  "Superscript": "حرف مرتفع",
  "Align left": "انحياز إلى اليسار",
  "Center": "توسط",
  "Align right": "انحياز إالى اليمين",
  "Justify": "ملأ السطر",
  "Font Name": "نوع الخط",
  "Font Size": "حجم الخط",
  "Font Color": "لون الخط",
  "Remove Formatting": "ازالة التعديلات",
  "Cut": "قص",
  "Your browser does not allow the cut command. Please use the keyboard shortcut Ctrl/Cmd-X": "Ctrl/Cmd-X متصفحك لا يدعم اوامر القص الرجاء استخدام اختصارات لوحة التحكم",
  "Copy": "نسخ",
  "Your browser does not allow the copy command. Please use the keyboard shortcut Ctrl/Cmd-C": "Ctrl/Cmd-C متصفحك لا يدعم اوامر النسخ الرجاء استخدام اختصارات لوحة التحكم",
  "Paste": "لصق",
  "Your browser does not allow the paste command. Please use the keyboard shortcut Ctrl/Cmd-V": "Ctrl/Cmd-V متصفحك لا يدعم اوامر اللصق الرجاء استخدام اختصارات لوحة التحكم",
  "Paste your text inside the following box:": "قم بلصق نصّك في المربع",
  "Paste Text": "الصق النص",
  "Bullet list": "قائمة نقطية",
  "Numbered list": "قائمة مرقمة",
  "Undo": "تراجع",
  "Redo": "تقدم",
  "Rows:": "اسطر",
  "Cols:": "اعمدة",
  "Insert a table": "ادرج جدول",
  "Insert a horizontal rule": "ادرج مسطرة افقية",
  "Code": "كود",
  "Width (optional):": "عرض (اختياري)",
  "Height (optional):": "ارتفاع (اختياري)",
  "Insert an image": "ادرج صورة",
  "E-mail:": "بريد الكتروني",
  "Insert an email": "ادرج بريدا الكترونيا",
  "URL:": "وصلة موقع",
  "Insert a link": "ادرج وصلة لموقع",
  "Unlink": "ازالة الوصلة",
  "More": "المزيد",
  "Insert an emoticon": "ادرج وجها",
  "Video URL:": "وصلة فيديو",
  "Insert": "ادرج",
  "Insert a YouTube video": "ادرج وصلة فيديو يوتيوب",
  "Insert current date": "ادرج التاريخ الحالي",
  "Insert current time": "ادرج الوقت الحالي",
  "Print": "اطبع",
  "View source": "اظهر المصدر",
  "Description (optional):": "الوصف (اختياري)",
  "Enter the image URL:": "ضع وصلة الصورة",
  "Enter the e-mail address:": "ضع عنوان البريد الإلكتروني",
  "Enter the displayed text:": "ضع النص الذي تريد اظهاره",
  "Enter URL:": "ضع وصلة موقع",
  "Enter the YouTube video URL or ID:": "ضع وصلة فيديو يوتيوب او رقم الفيديو",
  "Insert a Quote":"ادرج اقتباسا",
  "Invalid YouTube video": "هذا الفيديو غير صالح",
  
  // month format, replace - with the date format seperator and order in the
  // order used
  dateFormat: "يوم-شهر-سنة"
  

  }
  })(jQuery);

Hello!

SCeditor convert fonts style text into

[font=Lucida Grande', Tahoma, Arial, Verdana, sans-serif]

is normal? How to parse this in php ? (Lucida Grande' <--- quote) why?

cya

Not sure its a bug or just unexpected.

In v1.4.0 when you define a custom bbcode and use the attrs: declaration in its object, after you pass in an out of source -> wysiwyg -> source the code gets wrapped in "'s

This can be problematic for the receiving program if it does not expect the attributes to be " wrapped

V1.3.7 did not do this

[quote author=me date=12345679]hi[/quote]

becomes

[quote author="me" date="12345679"]hi[/quote] in the source editor

ETA: the attrs declaration does not seem to matter at all, it wraps them in quotes w or w/o that being defined in the object.

Add helper functions for blur, focus, keypress, keyup, keydown, BBCode parser and adding/removing commands.

I want to block paste event in the editor and allowing only the use of the "past text" command with the menu.
Is there a solution or a workaround for this ?

On some pages I have a typical response form, To, Subject, Body,e tc .... each has a tabindex value defined so they are keyboard accessible to move from field to field. When you initialize the editor on one of the fields, it does not respect any defined tabindex.

I'd like to see that it either uses the tabindex value ($original.attr('tabindex')) on the created $sourceEditor and $wysiwygEditor or perhaps there is already a way to pass this in that I'm missing.

I would like to see an option for specifying a directory location for the emoticons so that they can be placed in a subdirectory rather than being required to reside the root directory. Thank you.

Refactor the HTML-to-BBCode code to be in a separate class and improve support for different types of new line handling.

Getting the editor contents with getWysiwygEditorValue appears to set the cursor to the start of the last node not the end of the last node, at least in FF15., works correctly in chrome

Example:
http://dl.dropbox.com/u/56830471/updateTextareaTest.html

1. Go to the full wysiwyg editor
2. enter some text
3. Leave the cursor at the end of the entered text
4. Select the" Update the textarea and alert the contents" link
5. Now select a bbcode from the menu, the cursor will be at the start of the text, not the end where it was left.

Hello! ,

I think it would be necessary to include a button to add flash-swf content (as default feature) . Is it possible?

cya

Hi,

I think I found a small issue with the emoticons when the code contains a backslash (e.g. :-)
To fix it in the copy I'm working on I changed the regexp:
return str.replace(/[\$\?\[\]\.\*\(\)\|]/g, "\\$&")

to
return str.replace(/[\$\?\[\]\.\*\(\)\|\\]/g, "\\$&")

Okay so I am looking at using this to replace tinymce which quite frankly is completely pants at bbcode handling and it's doing my head in. For one thing in tincyme they don't have a proper "quote" function...

One thing about SCEditor is your readme isn't clear, it doesn't tell you what files you need to upload there seems to be a lot of files but no clear instruction on what files you have to upload to make it work.

If I copy a post from MS Word into the editor and then click on the send button.
Always comes "message

"Please correct the following errors before proceeding:

 The message is missing. Please enter a message."

How can you fix it?

Add ability to resize images in browsers that don't have native WYSIWYG resize.

Should make this a plugin as it adds to the size and not everyone would want it.