Fixed #58 and Fixed #19 - throttle interfering with UI #60

codewithtyler · 2015-09-21T03:07:41Z

No description provided.

Findus23 · 2015-09-21T10:29:29Z

I tested your fix and I am still having one issue:
The active-class is only working if I change following line https://github.com/RandomlyKnighted/bootstrap-wysiwyg/blob/underscore-fix/src/bootstrap-wysiwyg.js#L98
from

$(options.toolbarSelector,wrapper).find(toolbarBtnSelector).each(function () {

to

$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {

I have only a basic knowledge of javascript, but is it possible that my HTML is malformed?
Basicly it is:

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#content_de">
    <a class="btn btn-default" data-edit="format-p" title="Absätze">
        <i class="fa fa-paragraph"></i>
    </a>
    ...
</div>
<div class="row">
    <div class="col-md-6 preview">
        <form method="post" enctype="multipart/form-data" id='submitForm' action="?type=page&amp;id=4">
            <div id="content_de" class="editor">
                <p>Placeholder Text</p>
            </div>
            <input type='hidden' name='content_de_submission' id='content_de_submission' />
            <div class="text-center">
                <a id="submit_editor" class="btn btn-primary btn-sm" href="#!">Saving Changes</a>
            </div>
        </form>
    </div>
    ...
</div>

Is my HTML or the Javascript wrong

codewithtyler · 2015-09-21T11:19:08Z

@Findus23 thanks for posting your issue with the following fix. I copied what your example into an HTML file and can see the issue you're referring to. Unfortunately, I won't be able to take a closer look at it until this afternoon.

In the meantime, can you test something for me? Can you open each of the example html files in your browser and tell me if those work for you? That will help me with some initial troubleshooting.

Edit: By the way, what's the HTML form for?

Findus23 · 2015-09-21T16:08:45Z

I have tested the examples and they are working correctly, except for form-post.html. (and multiple-editors.html, but this is another issue: #31).
That way I have found out that the problem is Line 92 :

wrapper = $(editor).parent(),

The editor is only looking for toobar buttons in its direct parent. But in my case this is the <form>, which doesn't contain the toolbar.

By the way, what's the HTML form for?
I don't exactly understand, what you mean. I am writing a CMS and sending the content of the editor to the server to process it with PHP.

codewithtyler · 2015-09-22T11:44:51Z

Ah ok. I haven't worked on any implentations of this outside of HTML and ASP.NET, so I wasn't sure.

Would this work with what you're trying to do?

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 preview">
                    <form method="post" enctype="multipart/form-data" id='submitForm' action="?type=page&amp;id=4">
                        <div class="btn-toolbar" data-role="editor-toolbar" data-target="#content_de">
                            <div class="btn-group">
                                <a class="btn btn-default" data-edit="format-p" title="Absätze">
                                    <i class="fa fa-paragraph"></i>
                                </a>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                                <a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                                <a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                                <a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                            </div>
                        </div>
                        <div id="content_de" class="lead" data-placeholder="Placeholder text">
                        </div>
                        <div class="text-center">
                            <a id="submit_editor" class="btn btn-primary btn-sm" href="#!">Saving Changes</a>
                        </div>
                    </form>
                </div>
                ...
            </div>
        </div>
        <script type='text/javascript'>$('#content_de').wysiwyg();</script>
    </body>

I moved the form opening tag up to start before the toolbar. This allows the editor to continue to see the toolbar so it can change the colors of the button. I also moved the placeholder text. The editor utilizes a special data attribute called data-placeholder in order to create the placeholder text.

Findus23 · 2015-09-22T13:04:50Z

Unfortunately this isn't helping me much.
As you can see I am having two texts, but I only add the editor to one of them at a time via PHP to avoid issue #31. So it is easier for me, if I have the toolbar outside of the "row" div.

Would it be possible to add an option to use a custom wrapper class similar to https://github.com/RandomlyKnighted/bootstrap-wysiwyg/blob/master/src/bootstrap-wysiwyg.js#L323
?

Regarding the placeholder text: This was my mistake. I didn't mean a placeholder like the HTML attribute that disappears if you start typing, but rather a prefilled editor.

codewithtyler · 2015-09-22T22:56:10Z

Ah, I misread that earlier. I thought you were dealing with a single editor. So it appears that the issue you're experience is due to the bug mentioned in issue #31. This PR is not mean to fix that bug. If you will propose your wrapper question there I'll be happy to continue our discussion and create a fix for that bug. I believe with a bit more discussion we can come up with a good solution to the problem you are experiencing.

codewithtyler · 2015-09-23T01:45:53Z

You can ignore my previous comment. I got some additional time this afternoon to look over what you mentioned. To put it simply in the following line the editor

$(options.toolbarSelector,wrapper).find(toolbarBtnSelector).each(function () {

searches all elements that matches the toolbarSelector and the wrapper criteria and applies the background color to those elements. I think the original reason this was done was to accommodate situations like yours and to also accommodate the typical situation where the toolbar is a child of the parent element. However, this was not necessary as toolbarSelector handles both situations due to the toolbar having the data-role attribute.

codewithtyler · 2015-09-23T01:52:15Z

My latest commit should fix your issue.

Findus23 · 2015-09-23T07:31:26Z

That's odd. I somehow used commit https://github.com/RandomlyKnighted/bootstrap-wysiwyg/commit/d22e3aee5c and I am now unable to find out why it doesn't appear in the list of commits (https://github.com/RandomlyKnighted/bootstrap-wysiwyg/commits/underscore-fix)

But commit https://github.com/RandomlyKnighted/bootstrap-wysiwyg/commit/1e2f216a91e71e6417600cb88aa03d91d1fc5917 is working perfectly and now only needs to be merged into the main repository.

Thanks for helping me.

codewithtyler · 2015-09-23T13:06:54Z

I merged last 3 commits together as one by rebasing them.

No problem, thanks for catching the issue.

codewithtyler · 2015-09-29T23:25:27Z

@steveathon there may be merge conflicts once you merge my other PRs. I'll be happy to rebase this once they have been merged.

Updated grunt, demo and readme.

steveathon · 2015-09-30T00:19:34Z

Thanks @RandomlyKnighted this one is ready to rebase now. 🙅

codewithtyler · 2015-09-30T00:20:02Z

@steveathon give me a few mins and I'll have it fixed up for ya

…p-wysiwyg into underscore-fix

codewithtyler · 2015-09-30T00:22:35Z

@steveathon alright fixed haha...I'm getting faster at rebasing now

codewithtyler · 2015-09-30T00:24:39Z

After merging this..are we ready to release?

Fixed #58 and Fixed #19 - throttle interfering with UI

steveathon · 2015-09-30T00:29:59Z

Yep, I believe we are. I'll do a version bump tonight.

codewithtyler · 2015-09-30T00:31:28Z

Sounds good. When do you want to do the roadmap so we have a plan for the project? I'd like to know what our goals are from here.

codewithtyler · 2015-10-03T02:43:15Z

@steveathon don't forget to release the new version

Fixed #58 and Fixed #19 - throttle interfering with UI

1e2f216

Merge pull request #52 from RandomlyKnighted/add-grunt

fb553e5

Updated grunt, demo and readme.

RandomlyKnighted added 2 commits September 29, 2015 19:21

Fixed #58 and Fixed #19 - throttle interfering with UI

4cce20e

Merge branch 'underscore-fix' of github.com:RandomlyKnighted/bootstra…

50ba438

…p-wysiwyg into underscore-fix

steveathon added a commit that referenced this pull request Sep 30, 2015

Merge pull request #60 from RandomlyKnighted/underscore-fix

4eb3380

Fixed #58 and Fixed #19 - throttle interfering with UI

steveathon merged commit 4eb3380 into steveathon:master Sep 30, 2015

codewithtyler deleted the underscore-fix branch September 30, 2015 00:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed #58 and Fixed #19 - throttle interfering with UI #60

Fixed #58 and Fixed #19 - throttle interfering with UI #60

codewithtyler commented Sep 21, 2015

Findus23 commented Sep 21, 2015

codewithtyler commented Sep 21, 2015

Findus23 commented Sep 21, 2015

codewithtyler commented Sep 22, 2015

Findus23 commented Sep 22, 2015

codewithtyler commented Sep 22, 2015

codewithtyler commented Sep 23, 2015

codewithtyler commented Sep 23, 2015

Findus23 commented Sep 23, 2015

codewithtyler commented Sep 23, 2015

codewithtyler commented Sep 29, 2015

steveathon commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

steveathon commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Oct 3, 2015

Fixed #58 and Fixed #19 - throttle interfering with UI #60

Fixed #58 and Fixed #19 - throttle interfering with UI #60

Conversation

codewithtyler commented Sep 21, 2015

Findus23 commented Sep 21, 2015

codewithtyler commented Sep 21, 2015

Findus23 commented Sep 21, 2015

codewithtyler commented Sep 22, 2015

Findus23 commented Sep 22, 2015

codewithtyler commented Sep 22, 2015

codewithtyler commented Sep 23, 2015

codewithtyler commented Sep 23, 2015

Findus23 commented Sep 23, 2015

codewithtyler commented Sep 23, 2015

codewithtyler commented Sep 29, 2015

steveathon commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

steveathon commented Sep 30, 2015

codewithtyler commented Sep 30, 2015

codewithtyler commented Oct 3, 2015