getmeuk / contenttools Goto Github PK

Hello, first I'll like to thank you for this amazing app, I'm just hoping you can help me out on a little issue.

I was able to make all the images functions work but when the image is saved into the editor for some reason the editor does not allow me to edit it, change sizes or even move or align it. Is there any method needed to be called on the imageUploader.save function to enable these features?

Best regards.

Is it possible to put images in a row? i.e side by side- Can't seem to do this at the moment.

For example, I would like to have opportunity to copy-paste formatted data (text, images with H1-5, p, iframe and others tags) from any web page. Is it possible to save data formatting and ability to handle it by my own handler?

For example:

The following items for enhancement all come from a discussion with Simon Steinberger at PlainJS.com about his experience of the editor. I think each is valid and so will be looking to make changes in line with that feedback.

I would appreciate thoughts on how to best resolve 2 and 4.

1. Links can be removed by setting the link to empty, so if you select a section of link that you no longer want to be a link then click the link tool, remove the href value and hit return the link will be removed.
   • Based on you're feedback I think it makes a lot of sense to allow someone to edit a link if they have the cursor within a linked section of text, in that scenario selecting the link tool should automatically select the entire link.
   • I will also look at reinstating a remove link tool, I took this out as I never used it but I can see others might expect it.
   • I think it's still valid to allow a link to removed from only part of a selection.
2. As you say if there are 2 or more links in a selection of text then editing the link simply brings up the first href value and lets you set the link for the entire selection.
   • I'm not sure what the best behavior here is but I can see how this might be confusing for a user, I'll have a think on this.
3. Toggling headings and lists back to paragraphs.

• That makes perfect sense, I'll make that change. As you say at the moment you have to use the paragraph tool.

4. Removing lists and tables. You can remove a list item or table row using the remove tool, if you want to remove the entire list or table then hold down the Ctrl (or Command key on Apple) when selecting the remove tool.
   • I think this feature probably needs to be more obvious to users, I'll have a think about how I can do that.

Alternatively, is there a way to make something uneditable but not technically static so it can still be dragged?

Hi,

I'm currently evaluating a list of editors to use in our application in a collaborative environment- the editor signals changes via an event and I can add text changes from other collaborators programmatically at a given index in the text region.

From the documentation it wasn't clear to me if you fire any kind of events?

Thanks for the help,
Torsten.

After an npm install I'm getting this error while trying to build with the provided Grunt file.

$ grunt build
Running "coffee:build" (coffee) task
>> 1 files created.

Running "sass:build" (sass) task
OptionParser::NeedlessArgument: needless argument: --sourcemap=none
  Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.

Aborted due to warnings.

I think the table behavior can be improved:

• When the table gets blurred, remove empty rows
• When hitting the backspace / shift-tab on the first cell & first column of an empty row, remove the empty row
• On mouse down for a long time on the table should drag the whole table

I'm trying want to create this simple Bootstrap panel as new tool:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

All this steps should be followed to create an editable/draggable element?

• Create a new class extending ContentEdit.ElementCollection
• Create a new class extending ContentTools.DialogUI (to add editable properties)
• Create a new class extending ContentTools.Tool

I couldn't reach the current caret position of the editor, no matter whether I am using Javascript or jQuery for that. Is there a way to get this property?
BTW you have made a great editor and thanks for that.

I'm detaching an element with a click of a button. After detaching it, I'm getting this error:

Uncaught TypeError: Cannot read property 'descendants' of null
    ContentTools.History.History._store @   content-tools.js?ver=1.0:7657
    ContentTools.History.History.watch.delayedStore @   content-tools.js?ver=1.0:7622

What is the right way to remove elements? I'm just doing an element.parent().detach( element );

Is there any reason tests are ran manually?

Adding grunt-contrib-jasmine as a devDependency and a task to the Gruntfile will allow us to run the tests through PhantomJS. Could then hook up the tests and build process to Travis CI which is great because each commit in each PR will be tested.

If you want I can create a PR with updated Gruntfile and a .travis.yml configuration file.

I'm trying to insert a bunch of html on the caret/focused area while editing. There's no refresh method that I can find so I tried implementing it a few ways.

I can get the current position via #14. I can put in html after that element, but the editor won't be aware of the addition and will just throw it away when saving.

I also tried inserting html directly then saving, although it leaves the ce- classes behind.

Another trial was to get the selection first, destroy the editor before inserting the html. But I lose the reference to the caret position.

Any suggestions?

Is it possible to allow editing of div children elements of editable parent? I could definitelly use that for user-friendly responsive layouts creation.

I have this idea:
Tool similar to insert table, which inserts div.row. If div.row is focused, another tool insert div.col will be activated, so user can insert div.col as direct child of focused div.row. This div.col could be examined in inspector bar, so predefined styles could be applied on it (.col-lg-6 etc.). But this will need support for class selectors on style targets for ContentTools.Style class. It could be used like: new ContentTools.Style('1/2 Column on Large screen', 'col-lg-6', ['div.col']),

1. When I have a PreText element, I need to hit the return key twice in order to go to the next line - as if the first return press didn't do anything.
2. It would be great if the tab key inserted a tab (or 4 spaces) for indenting pre-code. I tried doing this for a PR but I can't get it to work, somewhere there's an \n inserting itself and prevents be from going back to the content using arrow keys.
3. In-line with 2., if the line is indented with a tab, it would be cool if hitting the return key would also implement the same indentation on the next new line.

Sample use-case: I created a row element and column elements which can only reside inside the rows. I've allowed dragging and dropping of the columns so you can move them from side to side. I think this may be a good feature to add.

I restricted the dragging to be just inside the same parent, but I think it should be extended to be a customizable restriction, not just to the same parent. This is how I did it for reference:

DivCol.prototype._onMouseOver = function(ev) {
    DivCol.__super__._onMouseOver.call(this, ev);

    var dragging, root;
    root = ContentEdit.Root.get();
    dragging = root.dragging();

    if ( dragging !== null && this.parent() !== dragging.parent() ) {
        this._removeCSSClass('ce-element--drop');
        return root._dropTarget = null;
    }

};

Perhaps it would be better to have an Element.prototype.canDragInto or something that would return a boolean (always true by default), then elements can just override it and customize the condition.

Any thoughts on how to integrate with React as a component?

This would be very helpful for triggering code for when the content is manipulated, including undos, redos and deletions (since doing a shortcut e.g. undo triggers the undo tool)

I love this, but I don't want my site content to be openly editable by anyone. Is there a way to add an admin user log in?

I think it would be a great enhancement to also allow people to enter a DOMElement instead of only a query selector as the first parameter of the EditorApp.prototype.init function. In most cases people (like me) already have the element at hand at time of initiating the editor.

I recently used ContentTools to build a dynamic site template builder. In this case I needed to use a compound key. So using multiple attributes to uniquely identify an editable area. Which meant I required regions to be populated with duplicate data-name elements. Why not return duplicates and let the implementing developer decide how to deal with it?

I solved the issue by changing the editor initialisation to:
editor.init('*[data-editable]');

Not sure if this is the best solution. I am receiving all editable elements instead of just those that have been edited.

How do I add a new title ? Or a new paragraph ? The only option that I see is to edit the existing content.

Thanks.

P.S. - Content Tools looks amazing. Good job !

To replicate:

1. Create 2 paragraphs each with a line of text,
2. Put your cursor at the end of the last paragraph,
3. Command + delete (Ctrl + backspace in Windows) until the line is erased, keep going until the cursor moves to the previous paragraph.

Expected Result: Cursor moves to the previous paragraph with the last paragraph deleted.

What I got: Cursor moves to the previous paragraph with the last paragraph deleted, but the original contents were appended to the cursor location.

I saw this post on HN and had similar concerns:
https://news.ycombinator.com/item?id=10309462

I've got to say, this entire set of tools looks incredibly polished and well designed. The documentation is amazingly thorough, and the getting started tutorials cover exactly what I hoped they'd cover. (I'm looking at building a collaborative, real-time editor for Markdown-like content.)

Everything was super positive.

And then I went to browse the code, and it turns out it isn't actually hosted on NPM; it has a weird custom build process that means every file has implicit module dependencies between them, but you can't really tell which; and everything's written in Coffeescript.

Went from super excited to questioning whether it's something that is going to be more of a hassle to develop and contribute to than it's worth.

The design decisions of the library itself still seem strong, but the developer experience design decisions will probably mean that it sees nowhere near the adoption it could have seen. If anyone knows of similar libraries I'd be really curious to hear what people have used in the past.

Is there a guide for getting up and running other than npm install from the git repo? Specifically what parts depend on what, how things are put together and what can be extended?

These enhancements were originally suggested by @bfintal in issue #54, they have been separated out as issue #54 also contained a bug report.

1. It would be great if the tab key inserted a tab (or 4 spaces) for indenting pre-code.
2. If the line is indented with a tab, it would be cool if hitting the return key would also implement the same indentation on the next new line.

I agree that both of these suggestions would be useful enhancements

Quick question: How should we define what is inserted on pressing the tab key? We could insert a tab (perhaps the expected behaviour), or insert whatever is defined in the ContentEdit.INDENT setting (I'm leaning towards this option), or we could have another setting specifically for pre-text indents, for example ContentTools.PRE_INDENT.

Would be nice to know which browser you tested it on. Also to explain with underlying web api you are using (contenteditable, ...) and if there are needs for polyfills.

I'm getting this:

Uncaught Error: Error at char 1 >> Error: Transition is undefined: (!, 3)

at line 1055:

throw new Error("Error at char " + this.head + " >> " + error);

I just added this into the HTML: <!-- -->

status == '200' maybe it's ev.target.status == '200', otherwise it always display the fork flash ui

link:http://getcontenttools.com/getting-started

For example, if I have this:

<div data-editable data-name="main-content">
    <p>I can edit this</p>
    <div><p>Cannot edit this</p></div>
</div>

What's the best way to enable editing the contents of the div without resorting to multiple editors? Multiple editors would (might) prevent drag and dropping from different editors and would complicate things with multiple inits, etc.

Related: #13

Currently, divs are automatically made static, and so the contents aren't editable anymore. Is there any limitation on why they're automatically made static?

Digging through the code, I noticed that divs are not included in _tagName so they're automatically made static. And since their behavior is different from normal text (e.g. hitting enter shouldn't create another div/element), adding divs to the existing ContentEdit.Text handlers won't work. I tried it and it somewhat works except for the example I just mentioned.

I think the best approach might be to extend ContentEdit.Text to create ContentEdit.Div for handling divs.

If you have an image inside a link:

<a href='#'>
    <img src='http://placehold.it/350x150'/>
</a>

When you start editing the image gets moved outside the link and you can't get it back inside even when cancelling the edit:

<img src='http://placehold.it/350x150'/>
<a href='#'></a>

We have a bootstrap style layout:

<Row>
  <Column>
    <Content id="1" />
  </Column>
  <Column>
    <Content id="2" />
  </Column>
</Row>

At present each Content component (we are using React) has its own editor via new ContentTools.EditorApp.get() and this.state.editor.init(#${ this.state.id } [data-editable], 'data-editable');. This all works well, however, if you have the scenario above with two content editors on the one View, we are running in to a problem with the placement of the ct-widgets (ignition, toolbox and inspector)... ideally we would like these to all be contained within the Content wrapping DIV so we can have control over their position.. is this possible?

The up/down/left/right arrows that show up when dragging are currently background images. If your content has an existing background image, or when you maybe have a full sized image in the content, the arrows become hard to see and in some cases you won't see them at all.

If we convert the dragging indicators to be a pseudo element instead with:
position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .4; background-color: #123456; background-image: url(...); z-index: 9999; pointer-events: none;
Then we can display the indicators on top of the elements. By adding pointer-events: none; we can still retain the mouse events on the elements too.

ContentTools is amazing! Thank you!

Does it support custom handlers of events like 'click on image', 'click on link'? I would like to show additional context menu when user clicked on image or link. Is it possible with actual API?

It may look like:

Hi there.
I think it'd be cool to have the editor trigger events on start and stop.
I can make a PR for that but would like to discuss beforehand if there's any reason not to do that.

What a nice project. Unfortunately most people don't want to learn a not common, not standardized language (coffee script), nor do they want to have to transpile for grasping it etc., when JS is used by everybody and works perfectly fine, especially now with ES6. I think this will hurt your project, prevent it from getting the attention it deserves, which is sad. In other words: Please use standards wherever possible.

Is it possible to make a bookmarklet that injects this lib into the page, and a Save button that exports the modified DOM/HTML?

Hi! Awesome work done here, really enjoy this!

I'm currently writing an Angular wrapper for this project, and I wonder if you could add this package to bower? Will simplify a lot of things as I currently have to include the build in my project and every time you create a new compatible build I have to replace the old build with the new build.

Cheers!

I was unable to find a demo showing the tool used on a page with multiple editable areas. Is it possible to have a page of "posts" and each post is editable and gets its own anchored toolbar (as opposed to the floating toolbar in the demos)?

I would like to make a plugin, which will overwrite paste() method in order to add opportunity to paste html data and clear it. Is it possible to do by developing plugin or something similar?

I know, that I can to overwrite method like:

editorCls = ContentTools.EditorApp.getCls()
editorCls.paste = (element, clipboardData) ->
    ... add you custom handler here ...

But it will be great, if CT will have plugin system to have opportunity make a public plugins for everyone.

Really nice work!
Is it possible to change the color of the text - without predefined properties?

The toolbox does not close when you save your changes in IE 10 & 11.The below error is the output from the demo page.

SCRIPT65535: Unexpected call to method or property access.
File: content-tools.js, Line: 4, Column: 3440

It appears IE does not like this line

this._domElement.blur();

To overcome the error I initially changed it to ...

if(this._domElement.blur){
     this._domElement.blur();
}

...which allows the changes to be saved.

However when you go to edit the HTML for a second time you get the below error when you click inside anything editable.

Unexpected call to method or property access.

The error is caused by the javascript this._domElement.blur(); again

There is a spell Mistake in API section.Here is the Link

I think these would be a great addition 👍

Is it possible to select all content by pressing Ctrl+A (Cmd+A) and then delete it? I can't do it.

Right now you cannot highlight multiple paragraphs, or multiple items on a bullet or numbered list. This makes it hard to edit them.

I understand that this may be the case because of how CT structures the editable content into different elements, but from a user's point of view selecting across multiple lines might be needed.

This is not of a high priority though, just a convenience feature.

Hello,

In trying to test this powerfull framework with php methods, i have an issue during the upload of images.
The dialog box don't detect the accomplishment of the task and blocked...but files are uploaded

Are there attributes to return the end of the upload to the dialog ?
Is possible that my method was wrong..

Thanks for sharing this project.

Is it possible to integrate translations for other languages? Maybe in some form of json file with translated strings?

Hi guys,

Just curios that anyone use it as email template before?
Does it work well with email client e.g. outlook?

Thanks

I don't know if I should report this here, but there it goes:

Where it reads:

• @getDatetime(element, selection) -> should be @getDatetime: (element, selection) ->
• ContentTools.DEFAULT_SETTINGS[0].push('time') should be ContentTools.DEFAULT_TOOLS[0].push('time')

ContentTools is really amazing, and maybe what I have been looking for.

But, question: we are working with an AngularJS driven project. We have a lot of directives, and I was wondering if it is possible to combine AngularJS and ContentTools.

This way I could call in directives, give them specific attributes, and fastly create complex content blocks in the page.

Do you feel it could be possible?

Greetings,

Maarten