Request: New Features - Inline Edit

[ShalomR]

contenttools_editfeatures.pdf

I am working with the code edited by Eeliya (https://github.com/GetmeUK/ContentTools/issues/106) which replaces the upload dialog with a URL fetch. I plan to add other features to the upload dialog later. BUT, I need some new features in the code first and am willing to pay if anyone is willing/able to add these. Refer to PDF file above.

Features: Ability to replace an Image. Image SRC value appear in Properties Dialog Solved - Element-Selected Toolbox: Low Priority: Plus Button for creating new [p] element Low Priority: Clicking outside of element deselects/saves changes. Solved - Bug Fix: paste is producing duplicate copies. (2 pastes for one action) Solved - Wider drop area to float an element

Any help would be appreciated. Contact me if you need further details.

ContentTools is a fantastic library. I am hoping to encourage further progress on this project for the benefit of all--A big THANK YOU to the team here for all their work.

[anthonyjb]

Hi @ShalomR, I can probably help you out with some example code for most of the items you've requested - the only one I can't really help you with is the inline editing tools (it's not something I'd like for CT, though I fully understand your preference here).

The final item you flagged, the duplicate paste issue, could you send an example, I'm using the current version of CT (1.6.4) on a daily basis and I haven't come across this behaviour (I use Chrome). A separate bug report for this with steps to reproduce would be great.

---

I'll try to provide examples for everything I can over the next couple of days (stacked at the moment I'm afraid), but as a start to change the size of the area used when dragging elements such as images for alignment you can use the following code:

// Make the drop edge larger
ContentEdit.DROP_EDGE_SIZE = 125

[ShalomR]

Hi Mr. @anthonyjb ! Thanks for your help! That code snippet did the trick for the edge drop, and I resolved double paste problem--I had initiated two instances of the editor.

I did figure out a simple way to do the inline editing. I'll post it here for others if they are interested.

Inline Tool Editor

Essential CSS Changes:

.ct-widget .ct-tool-group {display:inline-block;} /* inline toolbox */

.ct-grip {display:none;} /* hide the drag-grip */

.ct-widget.ct-toolbox {position:static; width:100%;background: linear-gradient(#ffe5b4, #ffb847);border: 1px solid #f39c12;} /* style toolbox as you wish */

In the content-tools.js file make these changes:

At line 1, Add this
var inlinetools_save;

Below this line
this.constructor.createDiv(['ct-widget', 'ct-toolbox']);
Add this
this._domElement.id = 'editor-toolbox';
inlinetools_save = this._domElement;

Below this line (there 3 instances of this line, apply to all)
addCSSClass('ce-element--focused');
Add this
var inlinetools = document.getElementById('editor-toolbox');
if (inlinetools == null) {inlinetools = inlinetools_save;}
document.getElementsByClassName("ce-element--focused")[0].before(inlinetools);

[anthonyjb]

Re: Clicking outside of element saves changes

My approach here would be to work approach this is in a similar manner to the auto save example on the website: http://getcontenttools.com/tutorials/saving-strategies#auto-saving

I wouldn't recommend saving whenever an editable element is clicked away from because this could be difficult to isolate from clicking on some other relevant element (like another editable element, or a tool, or a breadcrumb tag). Which ultimately would lead to save being constantly called.

---

Could you explain the Tool: + button, adds new paragraph (configure to add to default region, or below selected element) to me in a little more detail, I'm not 100% sure what you're trying to achieve with this?

[ShalomR]

Very cool, auto-save is a good approach, I'll run with that.

The "+" tool is essentially just a tool to mimic what happens when you press "enter": a new element/paragraph is created. (Just to enhance user-friendly-ness.) Whether it's a tool added to the toolbox, or simply a button added after .ce-element--focused, not sure what the simplest approach would be.

I think it would be mimicking the Text.prototype._keyReturn function, but ignoring the PREFER_LINE_BREAKS value? (By the way, did you write all this code yourself? Thanks for taking the time to reply!)