cleditor / cleditor Goto Github PK

a lightweight jQuerified HTML editor

Home Page: http://premiumsoftware.net/cleditor/

JavaScript 96.18% CSS 3.82%

cleditor's Introduction

This cleditor github organization is somewhat abandoned at the moment. If anyone would like to take over and coordinate development, I'd happily hand over the keys. cleditor represents a sane, tight approach to HTML editing so it would be great to see it thrive.

The original cleditor project can still be found at http://premiumsoftware.net/cleditor/

I was just wondering why you abandoned the cleditor project on github, there
are 2 more pull requests one at least seems to fix an issue.

Cheers
Lukas Oppermann

Hi Lukas.  I was hoping that all the patches flowing over the mailing list
would coalesce on github and things would progress without taking as much of
Chris's time.

At the time, few people seemed to care.  Then I stopped using cleditor altogether.

If you'd like to revive it and give it active stewardship, I'm happy to hand
over the passwords.  Even though I'm not using html editors anymore, I'd love
to see a cleditor revival.  :)

    - Scott

Ahh, I see. I would like to do it, but I am not that good in javascript, I
couldn't really say which one is a good pull and which one is not.

There is no successor to cleditor, is there? Some very similar project that is
still maintained.

AFAICT html editing is still dismal.

There's gigantic, overbearing CKeditor of course.  And then there's Aloha that
looks pretty slick but has licensing that I couldn't use in my commercial
projects.  And both of those are still a little buggy -- they just don't feel
as natural as, say, using Word.

I guess that's why everybody has converted to Markdown.

    - Scott

Yeah, CKeditor is just so freaking slow. I like the fast and reduced approach
of cleditor.

Markdown is nice, but it does not work for clients I feel. They rather use a
"word-like" editor.

I totally agree.

cleditor's People

Contributors

Stargazers

Watchers

cleditor's Issues

Editor not working in mobile and tablet

Hi I have enabled the editor in my website, but when I try to type something from mobile & tab, it just went off the keyboard, unable to type anything. Is the editor meant only for web? Or it can be used for other devices too.

convert html to plaint text

Hi bronson,

do you know how to convert html to plaint text in cleditor?

Thanks
sam

how can I set initialy html text?

how can I set initialy html text in the editor control on startup?

multiple editors in tbody grey out under jQuery 1.7.1 after hide()

I've got a table with numerous tbody elements in it. These tbody elements represent a product in my application. I need to hide() and show() these tbody elements so that one tbody is visible at a given time. Each tbody can contain 0 or more cleditors.

When my application loads the cleditors on the first tbody (init), all cleditors are rendered fine. But when I start using hide() and show() on the tbody elements (which are basically their containers) only the first cleditor is rendered as it should. All other cleditors in the tbody are greyed out. See the image for an example of a greyed out cleditor.

This is the code that initializes a collection of textarea's. This function is run each time a tbody is shown using show()

jqObjectCollection is the jquery collection of textarea-elements
The change function at the end is to trigger the change event bound to the textarea element.

function initCLE(jqObjectCollection){  
    $editors = null;
    $editors = $(jqObjectCollection).cleditor({
      width:        500, // width not including margins, borders or padding
      height:       200, // height not including margins, borders or padding
      controls:     // controls to add to the toolbar
                    "bold italic underline strikethrough subscript superscript | font size " +
                    "style | color highlight removeformat | bullets numbering | outdent " +
                    "indent | alignleft center alignright justify | undo redo | " +
                    "rule image link unlink | cut copy paste pastetext | print source",
      sizes:        // sizes in the font size popup
                    "1,2,3,4,5,6,7",
      styles:       // styles in the style popup
                    [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                    ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                    ["Header 6","<h6>"]],
      useCSS:       false, // use CSS to style HTML when possible (not supported in ie)
      docType:      // Document type contained within the editor
                    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
      docCSSFile:   // CSS file used to style the document contained within the editor
                    "", 
      bodyStyle:    // style to assign to document body contained within the editor
                    "margin:4px; font:10pt Arial,Verdana; cursor:text"

    }).change(function(){ 
        $(this.$area[0]).change();
    });
}

This code works fine when using jquery 1.6.4, but fails under 1.7.1

Width and Height Must Be User Friendly

Can user change editor size with and height with mouse at the right bottom corner

Cl editor Not Working on Popup Window

List.php

Also See the My Stack Overflow Question:

http://stackoverflow.com/questions/41714664/cl-editor-can-not-load-in-popup

Can't add inherited functionality

I'm writing a text filter, so that the text is analyzed and modified upon change. I need to add the filter to the cleditor plugin before any instances are created, so that all future instances inherit (or could be set to inherit) from this new functionality.

Example:
$.cleditor.change(function(event, editorInstance) {});
as opposed to
var editor = $("#editor").cleditor()[0]; editor.change(function(event) {});

The current code, as far I could tell, does not allow me to override the editor's default behavior, unless I get a reference to the editor from the scope of its creation.

<p> on Enter

Is there an option to make it so the enter key only does a "br" rather then a "p"

IE8: Paste as text submission results in 'unspecified error'

Line 715, char 7.

This is an old bug:
https://groups.google.com/forum/?fromgroups=#!topic/cleditor/mTLtCq-KEes

…and seems to have been a problem for the other major DHTML editors too:
http://ckeditor.com/forums/CKEditor-3.x/Copy-Paste-error-IE8

Bullet applies style to rest of page

Say i have:

<h1>Go ahead, take it for a test drive. Highlight some text and click some buttons.</h1>
<div><br></div>

I then press on the bullet button (or numbering) and i get

<h1 style="font-family: Arial, Verdana; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; ">Go ahead, take it for a test drive. Highlight some text and click some buttons.</h1>
<div><ul><li><span style="font-family: Arial, Verdana; font-size: 13px;"><br></span></li></ul></div>

When what I expect would be something like

<h1>Go ahead, take it for a test drive. Highlight some text and click some buttons.</h1>
<div><ul><li><br></li></ul></div>

I really don't get why we would want the rest of the document to have a new style applied to it.
Thanks

I'm using Google Chrome

Tip to set width AND ''Getting Started' example both throw error

Your tip "width - The editor width not including margins, borders or padding. Tip Use 'auto' to treat the editor as a block element that fills it's container" throws an error in jquery 3.x . I get this:
Uncaught ReferenceError: auto is not defined

I've tried it with quotes (width: 'auto') and without quotes (width: auto). No joy. I see that it's set to 'auto' in your included scripts, but I was trying to use your example in Getting Started. That gets an error as well: Uncaught TypeError: button is undefined .

The whole point of using the 'Getting Started' example was to control which toolbar buttons are shown.

Anybody know how to fix this, or should I just move on to something else (besides CkEditor and TinyMCE)?

Support Fullscreen mode + button to enter Fullscreen mode

Just to let anybody in the need of a "fullscreen" button know that i've successfully managed to have one working. Code and explanations are here: http://stackoverflow.com/questions/10525448/cleditor-text-editor-on-fullscreen-mode

Pasted in-line here:

(function($)
{
    //Style for fullscreen mode
    var fullscreen = 'display:block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999;',
    fullscreenIframe = 'height: 100%; width: 100%;', 
    style = '';

    // Define the fullscreen button
    $.cleditor.buttons.fullscreen = {
        name: 'fullscreen',
        image: 'fullscreen.gif',
        title: 'Fullscreen',
        command: '',
        popupName: '',
        popupClass: '',
        popupContent: '',
        getPressed: fullscreenGetPressed,
        buttonClick: fullscreenButtonClick,
    };

    // Add the button to the default controls before the bold button
    $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls.replace("bold", "fullscreen | bold");

    function fullscreenGetPressed(data)
    {
        return data.editor.$main.hasClass('fullscreen');
    };

    function fullscreenButtonClick(e, data)
    {
        var main = data.editor.$main;
        var iframe = data.editor.$frame;

        if (main.hasClass('fullscreen'))
        {
            main.attr('style', style).removeClass('fullscreen');
        }
        else
        {
            style = main.attr('style');
            main.attr('style', fullscreen).addClass('fullscreen');
            iframe.attr('style', fullscreenIframe).removeClass('fullscreen');
        };
        editor.refresh(data.editor);
        editor.focus();
        return false;
    }
})(jQuery);

IE Script Error "Unterminated string constant"

on Line number 819

cleditor get problem with jquery-ui

Hi, i'm using cleditor with jquery-ui tabs/dialog.

When i load page cleditor works fine but when i use ajax to update textarea content (open dialog), cleditor has been disabled and show content as boolean.
All buttons are inactive except 'Show source' and 'Print', when i click on 'Show source' button, it displayed right result, but in cleditor it displayed as "true".

I searched google and look like not only me got same problem.

cleditor 1.3.0 conflicts with JQuery UI 1.9.2 in IE8

I found that it conflicts with JQuery UI 1.9.2 in IE8.

If you use jQuery UI 1.9.2 , It fails to change TEXT's color and background color in IE8.

Crashing in IE 8

I am using the latest release v1.4.3
In IE8 it crashes the browser (working fine in IE9 and above), the behavior is erratic.

At times it happens if I click outside the editor and then when I click back inside the editor (onfocus)
sometimes just by fast clicking inside the editor it happens
sometime while typing text it shows the text inside the editor after a lag and after typing a few lines it crashes the browser

My application is very ajax heavy, using JQ1.7+, JQ-UI 1.10+, twitter bootstrap, JQ fileupload plugin, handlbars.js and flot.js
Total JS size uncompressed in dom is approx 1 MB

html <textarea> looks bad

When I insert html code in the editor, if that code includes a textarea element, when displayed again (for example, when I save the changes and return to open the site for editing) looks bad.

Attach an image of example.

This repository is out of date at 1.3.0. The newest on CLEditor website is 1.4.5.

The "What's New" page shows an update July 19, 2014 with new version 1.4.5!
http://premiumsoftware.net/cleditor/whatsnew

This project IS still in development after all!

Take a look at the top of their downloads web page:

http://premiumsoftware.net/cleditor/downloads

Version 1.4.5 is available now. Version 1.3.0 is an old version that appears in their prior versions list.

This repository only imported up to version 1.3.0 and should be updated.

Keep that in mind when using this code!

Ability to put the cursor at the end of the editor

Is there a way to move the cursor to the very end of the editor. I have a button that inserts the date and time and a
. I want the cursor to goto the very end but I have not figured out how to do that.

Table Plugin cannot run in IE11.

Dear:
I found Table plugin cannot click in IE11.
Is it a issue?

The "link" button should not encourage invalid URLs

When you click the "link" button, you get a popup with the text "http://" in the text box. The "http://" text is also highlighted. I think the "http://" text being highlighted is an issue because it makes it too easy to enter invalid URLs (by typing right away and overwriting the "http://" part).

Plug-in support for velsn/word

https://github.com/vesln/word

text editor losing cursor location when using Jquery tabs

HI,

I've a jquery tab control on the page which contains multiple tabs. Each tab contains editor with different ids.
https://jqueryui.com/tabs/

When I update the text on first editor and move cursor to the last line and goes to another tab, then came back to the previous tab, editor looses cursor location and scroll the editor back to top.

Why is this happening?

Please help. How to prevent editor scroll by it own on loosing focus.

Thanks,
Mujeeb.

Formatting behaves differently in Chrome

Try this in Chrome and Firefox or IE and compare the results:

Add this html in 'Source mode':

<h2>1. First line</h2><div>this is an example</div>
<h2>2. Second line</h2><div>test</div>

Switch off 'Source mode' and it should look like this:
Select the word 'an' in the text and set it to bold.

Result:
The formatting of the headlines changes to this html:

<h2 style="font-weight: normal;">1. First line</h2><div>this is <span style="font-weight: bold;">an</span> example</div>
 <h2 style="font-weight: normal;">2. Second line</h2><div style="font-weight: normal;">test</div>

See here:

In IE and Firefox this does not happen and only the word 'an' changes to bold. This is what we'd expect in Chrome as well.

change event key detection

Hi, nice plugin!

I'm trying to use the change event and autoresize the textarea while the user types but the change event only executre the function when there was some change made with the mouse, like bold text or similiar.

It's possible to detect the keydown, keydown events?

I'm using this code

editor.change(ex);

Thanks :)

Form change event should be fired

When CLeditor is contained into a form the change event should be fired for the form and the textarea, not just the event.

Editor not working if container is initially hidden

CLEditor is a great tool but i've faced a very annoying problem that the editor doesn't work if its parent is initially hidden.
To reproduce the issue, Add a [textarea] element inside a [div] element
then set [display] attribute to [none] for the [div]
Try to display the [div] on button click, The editor will not work.
What i'm trying to do is to get the editor initially hidden and get displayed under specific conditions.

Detach Editor

I have a need to attach and detach the editor to a textarea. It would be good to have a remove/detach option.
i.e
$('#mytextarea').cleditor('remove');

Thanks

xss vulnerability

Hello! I tried the XSS vulnerability which I found on this page:
https://advisory.checkmarx.net/advisory/CX-2021-4791/
I tried it with CLEditor 1.4.5 and was able to reproduce it on the CLEditor demo page as well.

Steps to reproduce:

Click the source button
Paste the following payload:
Xss<!--{cke{cke_protected}_protected} --!><img src=1 onerror=alert("XSS")> Attack
Click the source button again to return to the regular editor.

Kind regards!

use editor.doc.body.contentEditable=true for every browser

Hi.

The CLEditor uses contentEditable attribute only for IE, but Gecko/WebKit also support it a long while.
Particularly, there is a problem with designMode in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=310488
This means that any flash-based video inserted into text is invisible in rich-text mode and this behaivor brings some issues.

My proposal is to use editor.doc.body.contentEditable=true for every browser. This allow us to see flash video in Firefox in rich-text mode. Though, we should do some kind of hack in Firefox during switching back from source mode to rich-text mode:

  // Show the iframe
  if (sourceMode(editor)) {
    delete editor.range;
    editor.$area.hide();
    editor.$frame.show();
    buttonDiv.title = button.title;
    // the next two lines are needed to enable rich-text mode after switching back from source mode
    editor.doc.body.contentEditable = false;
    editor.doc.body.contentEditable = true;
  }

Load text into CLEditor via ajax call

I would like to load some text retrieved from a dB into a CLEditor driven textarea.

The user clicks a link:

<a class="editlink" id="<?php echo $review['id']; ?>" href="#"><?php echo $review['title']; ?></a>

JQuery passes the ID to GO.PHP:

$(".editlink").click(function() {
    $.get("go.php", {param: $(this).attr('id')},
        function(data) {
            $(#area1').html(data);
        });
    return false;
});

GO.PHP retrieves the text from the dB:

$qry = mysql_query("SELECT * FROM reviews WHERE id = ".$_GET['param']." ");
while($review = mysql_fetch_array($qry)) {
    echo $review['description'];
}

and the HTML:

<textarea id="area1" rows="30" cols="55"></textarea>

As confirmed by Firebug consolle, ID and the text are retrieved correctly. The problem I noticed is that when CLEditor is active, loaded and working I need to refresh the page to see the text loaded into the textarea. If CLEditor is not loaded, the text is loaded via ajax suddently without any page refresh.

I did read about :

editor.$area.val(htmltext);
editor.updateFrame();

but as I'm still learning jQuery would someone be so kind to add these two lines into my above code?

Form data not posting from CLEditor <textarea>

Hello,

How do I make sure that the most recent changes made to the CLEditor <textarea> are posted back?

For example, on my web page, I start with an empty <textarea> that has CLEditor applied to it.

When I click the Save button, it does a form post, but the form variable from my <textarea> / CLEditor is an empty string.

How do I make my recent typed changes POST off?

I have tried lord knows how many Google references and all of them are wrong or simply fail to work.

Can't make link from image

Getting an error "A selection is required when inserting a link".
Need to select image with some space or text to avoid this.

Different source code in differenr browser

I past simple text in editor

example:
ruweroipgh
lkergnelktgetg

In Opera i have
ruweroipgh
lkergnelktgetg

And this text in Chrome

ruweroipgh

lkergnelktgetg

default empty content

Hi guys,

I do really like your plugin, and seriously think I will change my current wysiwyg for it.

I have but one question/request:
The editor behaves differently in different browsers, when it come to default, empty content.
e.g.
In Opera (v11.01), the default, empty content is "<p><br></p>", and any text entered is automatically enclosed in a paragraph.
In Firefox(v4.0) and Chrome(10.0.648.204), however, the default content is "<br>", and subsequently entered text is not enclosed in a paragraph.

Now, I don't know to what extend it is browser or implementation-related, but it would be really great, if it could be assumed that new content is by default always enclosed in a paragraph. It facilitates many content parsing tasks, i.e. Facebook URL Linter.
Is there a way to configure such a thing?

Configuration Settings for Default Paste Action

When pasting from word or from the web a bunch on unwanted code is inserted. It would be great to have an option to set a default for paste actions, if possible of course.

I'm not alone here, these people have the same problem, https://groups.google.com/forum/?fromgroups=#!topic/cleditor/lVtpoWOGf2o

Button for pre/code formatting

Here's a possible implementation:
https://gist.github.com/837281

set data Dynamic, help me out

Initialized like this

$('#composeBody').cleditor({ height: $(window).height() / 2, width: '600px'});

passing data throw js like this

body= 'Helo' ;

$('textarea#composeBody').text(body);

Firefox first focus

Set the initial html content:

editor.updateFrame();```

Then, in Firefox 3 or 4, click at the end of the initial content and start typing. You will notice that the cursor position is set to 0 and text appears before the initial content, rather than after. This only occurs once and behaves correctly on subsequent attempts to to edit the content.

div scrollbar freezes in Chrome

I have a few cleditors loaded into a div using ajax. The div's scrollbar gets stuck in Chrome only. Works fine in FF and IE.

I pinpointed the problem to the refresh function. If I comment out doc.open and doc.close it fixs the problem (doc.write worked regardless)

I think the fact that the div is populated by an ajax call is important here.

Not sure why doc.open causes this issue but I thought I'll notify you.

Thanks for a great wysiwyg editor
-y

cleditor / cleditor Goto Github PK

cleditor's Introduction

cleditor's People

Contributors

Stargazers

Watchers

Forkers

cleditor's Issues

Recommend Projects

Recommend Topics

Recommend Org