joshontheweb / etch Goto Github PK

How can I add custom icon(button) to add my own tag ?

thanks

After implementing #19 it uncovered a little bug, the mousedown.editor listener is being added to the body multiple times, one for each time you click inside the editable area. Can be fixed with

$('body').unbind('mousedown.editor').bind('mousedown.editor', function(e) {

Or by simply making editableInit bail out before that.

In Firefox (but not in Webkit) pressing any buttons on the carat-following menu takes focus away from the content-editable text area, and does not return it.

Hi,
just an idea, after a "document.execCommand" or other text modification, you can call a function (empty in etch-core).

Why adding a callback after a modification ?

I need to store the model after a modifcation, so I override all the modification function (clearFormatting, toggleBold, toggleItalic ... ) just to add a callback method after the execCommand action. If in etch-core, you implement this callback, I have just this callback function to override.

If it could auto-detect links and make them clickable, that would be great.

Because you check the error message with english string "Invalid argument.", in other language versions of IE (no english) is this exeption always rethrown. The error message is localized.

try {
document.execCommand('StyleWithCSS', false, false);
}
catch (err) {
// expecting to just eat IE8 error, but if different error, rethrow
if (err.message !== "Invalid argument.") {
throw err;
}
}

Hello,

I got an error coming up every time I clicked a editable field which is configured to have no buttons.

The error was as follows:
Uncaught TypeError: Cannot read property 'length' of undefined - etch.js:76

To reproduce it I did:

1 - Click an editable field which has some buttons
2 - Click an editable field configured to have no buttons

The erroneous line is 76:
// hide editor panel if there are no buttons in it and exit early
if (!buttons.length) { $(this.el).hide(); return; }

Because there are no buttons in this field, "buttons" is undefined therefore we can't check it's "length". A prior check for the existence of "buttons" is necessary.

I solved my problem locally by changing that line to:

// hide editor panel if there are no buttons in it and exit early
if (buttons === undefined) { $(this.el).hide(); return; }

I'm seeing toggleHeading but it's not enabled by default in the toolbar.
Is there a reason for this? e.g.: quirky?

I think jQuery 3.x doesn't have size. I'll try to cook up a patch with ".length".

It would be great to have a destroy function that contains the code that's currently in the body mousedown.editor event listener. That would allow you to destroy the editor on blur of a div from custom code outside etch, which might remove the need for the body mousedown event listener and enable handling of blur caused by tabbing into another field etc.

Thanks for the great project!

I really love the idea of etch, and it seems pretty graceful so far. Thanks for putting it together!

This isn't really an issue, I was just wondering and wasn't sure where to ask.

I don't know if I fully understand the concept, maybe I don't know enough about 'EditableContent', but am I supposed to save the parent of the .editable or can we save the content of .editable?

Is there anyway we can get the element that was .editable with the on 'save' event?

Read the above line in the docs. Is this still planned, since the repo seems a bit abandoned.

I might be able to put in some work to get a pull request going if I know where to start.

It would be good if the menu would appear below the cursor if there is not enough space to appear with the normal positioning.

A nice feature would be to highlight toolbar buttons to appropriate state when cursor is on text. e.g. if cursor is on text that is bold, the [B] toolbar button would be highlighted.

Some formatting stuff only makes sense when actual text is selected. That is Bold, Italicize, Underline, Link, remove Formatting – they should only be shown when text is selected, not when the cursor is moved somewhere.

In fact, to make everything less obtrusive I’d advise to only ever show the widget if text is selected as it rarely makes sense when nothing is selected but is pretty annoying when wanting to write something.

Trying to grok the library and I came across this weird construct. What's the each supposed to iterate over?

        $.fn.etchInstantiate = function(options, cb) {
            return this.each(function() {
              //stuff
            });
        };

"etch.editableInit handles everything else for you except for saving." Could you briefly explain how this is accomplished (to someone with beginner level js skills)? Thanks!

Just an idea if you come to Etch via other links, it might nice to have some link to the demo on the Readme:

http://etchjs.com/#demo

I'd love to hit a keyboard shortcut and automatically start a list instead of having to click the button. Same with links.

In your demo on http://etchjs.com/ the button layout changes at well when you change between title and body. But in your tryit.html, if you had a title, the button layout doesn't change.

Without removing the editor, the button layout doesn't change.

My first investigation is that the version of backbonejs uses between the demos are not the same and "maybe" in the editableInit this code doesn't copy/paste the editorModel.attributes.buttons[]

editorModel.set({
     editable: $editable,
     editableModel: this.model
});

This problem doesn't appear in Chrome but always in FF and IE.

Hello. I've just tried to setup the example with some changes to libraries' versions. When I used Etch 0.6.2 against Backbone 1.1.0, an error occurs:
TypeError: this.$el.off is not a function

The same issue exists with Backbone 1.0.0. But when I downgraded the Backbone version to 0.9.0, things work fine. I tested on Firefox and Chrome. Both have the same result.

Here are the HTML I used for this test:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Etch Test</title>
<link type="text/css" rel="stylesheet" href="./css/etch.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script type="text/javascript" src="./js/etch.js"></script>
</head>
<body>
  <section id="main">
    <div class="article">
        <h3 class="title editable" data-button-class="title">
            This is an editable title
        </h3>
        <div class="body editable" data-button-class="all">
            Text with a light blue background is editable.  You will find it easy to use etch to <u>underline</u> text as well as <b>bold</b> and <i>italic</i>.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.               
        </div>
    </div>
  </section>
</body>
<script type="text/javascript">

(function() {
    var article = Backbone.Model.extend({
        defaults: {
            title: 'Default Title',
            body: 'Default body text'
        }
    });

    var articleView = Backbone.View.extend({
        initialize: function() {
            _.bindAll(this, 'save')
            this.model.bind('save', this.save);
        },

        events: {
            'mousedown .editable': 'editableClick'
        },

        editableClick: etch.editableInit,

        save: function() {

            // normally you would call model.save() here but this is a demo
            $(this.el).find('.editable').effect('highlight', {color: 'yellow'});
            $('.save-event').fadeIn('fast', function() {
                setTimeout($(this).fadeOut('slow'), 10000);
            });
        }

    });

    $article = $('.article');
    var model = new article();
    var view = new articleView({model: model, el: $article[0], tagName: $article[0].tagName});
})()

</script>
</html>

Brwosing the code I see a collections object which currently doesn't do anything.
Is this here for some future functionality to incorporate repeatable regions?

If so, what's your idea on this?

When you select an area and click TAB it switch to the next area, but when the switch happens the toolbar doesn't refresh.

So in the example on the site, if I select the Title area I will have [ I, B, U ], then if I press TAB and I select the Description area the toolbar it will be the same, when instead it should have other button such as Link, and List.

Also it could be cool if TAB key is binded to etch, so that if I press TAB it only switch between the selectable-area of etch, instead of jumping on every link, button on the page.

Hello,

I've read that "document.execCommand" outputs different HTML in different browsers. This is not very good if we're to build a content-editing app that users use and switch across different browsers. Once they open the app in another browser, and try to edit the contents created in another browser, some browsers will probably not respond correctly.

http://www.quirksmode.org/dom/execCommand.html
"For instance, when making a selection bold, IE and Opera add a tag, while Mozilla adds a ."

mousedown, mouseenter events are good, but not enough. When the user go to the editable div by pressing tab on keyboard, the editable panel doesn't show up.

You can see this even on Demo page by pressing tab few times unless it will be focused on Title.

This is important when some fields are editable without etch formatting (like title) and following others are with etch formatting.

My suggestion is use focusin, focusout.

Would it be better to remove a link entirely when selecting a subrange of a link and clicking the toggleLink?

.getSelection() doesn't work in IE8. Replace with rangy.getSelection() and make rangy a required dependency?

I know it will be necessary to implement BackEnd for image uploading, however, etch itself should have the role of an input file when clicking on an img and image icon, right?
If so, is there anything that should be done to prevent this problem from occurring?

Models.ImageUploader is not a constructor

In fact it is not, since the models at the end of loading only have the method Editor. But I did not understand why.

Can someone help me?