getmeuk / contenttools Goto Github PK
View Code? Open in Web Editor NEWA JS library for building WYSIWYG editors for HTML content.
Home Page: http://getcontenttools.com
License: MIT License
A JS library for building WYSIWYG editors for HTML content.
Home Page: http://getcontenttools.com
License: MIT License
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
To replicate:
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.
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.
href
value and hit return the link will be removed.
href
value and lets you set the link for the entire selection.
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?
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.
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-widget
s (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?
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.
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 );
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
Hi guys,
Just curios that anyone use it as email template before?
Does it work well with email client e.g. outlook?
Thanks
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.
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.
Is it possible to integrate translations for other languages? Maybe in some form of json file with translated strings?
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.
Is it possible to make a bookmarklet that injects this lib into the page, and a Save button that exports the modified DOM/HTML?
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: <!-- -->
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']),
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.
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?
status == '200'
maybe it's ev.target.status == '200'
, otherwise it always display the fork flash ui
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.
There is a spell Mistake in API section.Here is the Link
Really nice work!
Is it possible to change the color of the text - without predefined properties?
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?
These enhancements were originally suggested by @bfintal in issue #54, they have been separated out as issue #54 also contained a bug report.
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
.
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.
Any thoughts on how to integrate with React as a component?
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.
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)
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.
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.
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.
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.
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!
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 !
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.
\n
inserting itself and prevents be from going back to the content using arrow keys.I think the table behavior can be improved:
Alternatively, is there a way to make something uneditable but not technically static so it can still be dragged?
Is it possible to select all content by pressing Ctrl+A (Cmd+A) and then delete it? I can't do it.
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?
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 think these would be a great addition ๐
Is it possible to put images in a row? i.e side by side- Can't seem to do this at the moment.
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.
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.
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')
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.