This is better explained by following these steps:

1. put your cursor on the end of a paragraph
2. press enter to create an empty paragraph
3. click just a bit above or below the empty paragraph (outside to make the caret go away, but not on another element)
4. you can't click on the empty paragraph anymore to put the caret back inside.

May be related to #116

Hello, First of all thank you for this amazing library.

I can't crop images in dialog i followed the http://getcontenttools.com/tutorials/handling-image-uploads tutorial and the following link contain the image upload function ----> http://ideone.com/br0wlV

i can't update the crop Region and crop buttons didn't work with me. Thanks in advance.

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 already, or to add in, the ability to turn off styling options for specific areas of text, using an extra data attribute?

Use case: On an editable page there are regions, such as headings, where I don't want a user to be able to apply formatting beyond plain text as to do so would break the design. On other sections of the page the editor should be able to use the full rich text toolbar.

I haven't been able to find a way of doing this in the documentation. If it is in there then maybe it should be highlighted on the demo page.

Thank you.

I made small system that allows you to chose which page to edit using php. First i used include 'file'; then i saw i cant edit them so i went with other method which reads the whole file and places it in webpage. Now i have yellow box around it which is indicator that is editable. But it's not. So i totally removed editable region from main page and placed it in function where php is "including" desired files. Same result.

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']),

I need to start editor on the page as soon as it will be loaded. So I've added Editor start method in load event listener:

editor = ContentTools.EditorApp.get();
editor.init('[data-editable], [data-fixture]', 'data-name');
editor.start();

Edit mode is turned on, editor.getState() has been changed from ready to editing, but start editor button one the top-left corner is not changed to save\cancel buttons. And clicking on it just hides it and displays save\cancel buttons which work as expected then.

When trying to edit in production. I'm getting errors in production Uncaught TypeError: this.element.tagName is not a function on the concat/uglifier source

I try to hide the editing icon and auto-edit the content, but cannot make it with xxx._ignition.trigger('start'), the following is my code:

HTML:

<template name="newInquiryModal">
    <div class="modal fade" id="newInquiryModal" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                {{> newInquiryModalInner}}
            </div>
        </div>
    </div>
</template>

<template name="newInquiryModalInner">
    <div class="modal-header popupHeader">
        <h3>New Inquiry</h3>
        <span class="modal_close js-cancel"><span class="glyphicon glyphicon-remove"></span></span>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Inquiry</span>
                <div data-editable data-name="newinquiry1" id="newinquiry1"> </div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary js-submit">Submit</button>
        <button type="button" class="btn btn-primary js-cancel">Cancel</button>
    </div>
</template>

.js:

            newInquiryEditor = ContentTools.EditorApp.get();
            newInquiryEditor.init('[data-editable]', 'data-name', fixtureTest=null, withIgnition=true);
            //newInquiryEditor.start();
            newInquiryEditor._ignition.trigger('start');


            // Starting the editor manually
            //editor._ignition.trigger('start');

            // Stoping the editor manually (save)
            //editor._iginition.trigger('stop', true);

            // Stoping the editor manually (cancel)
            //editor._iginition.trigger('stop', false);

            newInquiryEditor.addEventListener('saved', function(ev) {
                var saved;
                console.log(ev.detail().regions);
                if (Object.keys(ev.detail().regions).length === 0) {
                    return;
                }
                newInquiryEditor.busy(true);
                saved = (function(_this) {
                    return function() {
                        newInquiryEditor.busy(false);
                        return new ContentTools.FlashUI('ok');
                    };
                })(this);
                return setTimeout(saved, 2000);
            });
            FIXTURE_TOOLS = [['undo', 'redo', 'remove']];
            ContentEdit.Root.get().bind('focus', function(element) {
                var tools;
                if (element.isFixed()) {
                    tools = FIXTURE_TOOLS;
                } else {
                    tools = ContentTools.DEFAULT_TOOLS;
                }
                if (newInquiryEditor.toolbox().tools() !== tools) {
                    return newInquiryEditor.toolbox().tools(tools);
                }
            });

            $("#newInquiryModal").modal("show");

However, I can use the newInquiryEditor.start() to show up the editor.

Is there anything I should check for my code.

Hi,

I noticed that the editor in the demo does not load when you click the pencil in Microsoft Edge, UNLESS you have the dev tools open, which seems really weird. No errors thrown, it just doesn't load (spinning gear).

I tried it on 3 different computers (owned by different people) with the same results.

Edge version 25.10586.0.0

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 don't know CoffeScript at all, so a thorough review is required, the changes here are reversed from a proven JS implementation I made. If you like it, please adjust accordingly.

Example code for handling the paste event:

  const uploader = function (ev) {
    var formData = new FormData();
    formData.append("image", ev.detail().file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload");
    xhr.onload = function () {
      if (xhr.status == 200) {
        const response = JSON.parse(xhr.responseText) || {};
        if (ev.detail().element && response.url) {
          editor.pasteHTML(ev.detail().element, `<p><img src="${response.url}"/></p>`, true);
        }
      } else {
        console.log("Nope");
      }
    };

    xhr.send(formData);
  };

  editor.addEventListener("imagepaste", uploader);

Or, you can close it, no hard feelings :)

Hi, I was installing the library into a Docker container and after a bunch of deprecated notices, npm install threw an error. I ran git clone per the readme, cd ContentTools and then npm install:

npm ERR! code 1 npm ERR! path /var/www/html/resources/js/ContentTools/node_modules/phantomjs npm ERR! command failed npm ERR! command sh -c /tmp/install65745564693.sh npm ERR! PhantomJS not found on PATH npm ERR! Phantom installation failed TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined npm ERR! at new NodeError (node:internal/errors:371:5) npm ERR! at validateString (node:internal/validators:120:11) npm ERR! at Object.join (node:path:1172:7) npm ERR! at findSuitableTempDirectory (/var/www/html/resources/js/ContentTools/node_modules/phantomjs/install.js:127:30) npm ERR! at /var/www/html/resources/js/ContentTools/node_modules/phantomjs/install.js:476:19 npm ERR! at nextTickCallback (/var/www/html/resources/js/ContentTools/node_modules/kew/kew.js:47:28) npm ERR! at processTicksAndRejections (node:internal/process/task_queues:78:11) { npm ERR! code: 'ERR_INVALID_ARG_TYPE' npm ERR! } TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined npm ERR! at new NodeError (node:internal/errors:371:5) npm ERR! at validateString (node:internal/validators:120:11) npm ERR! at Object.join (node:path:1172:7) npm ERR! at findSuitableTempDirectory (/var/www/html/resources/js/ContentTools/node_modules/phantomjs/install.js:127:30) npm ERR! at /var/www/html/resources/js/ContentTools/node_modules/phantomjs/install.js:476:19 npm ERR! at nextTickCallback (/var/www/html/resources/js/ContentTools/node_modules/kew/kew.js:47:28) npm ERR! at processTicksAndRejections (node:internal/process/task_queues:78:11)

Hi, I'm trying to use the style attribute to store modifications like color or font-size change, however when I save the project, these attributes are erased. How could I keep these attributes on save?

Here is a code snippet, used in a custom tool:

SelectColor();
element._domElement.style.color = selectedColor;
element.addCSSClass(this.className);
callback(true);
return this.dispatchEditorEvent('tool-applied', toolDetail);

I'm trying to build a minimal HTML editor, in my HTML file I have some buttons and content-editable div like this :

<button id="tag_b">B</button>
<div id="text_prompt" contenteditable="true" data-editable data-name="main-content"></div>

The goal is when I click the button, the text selected in the div have the bold tag. In the doc I saw the method ContentTools.Tool.apply(element, selection, callback) In the source I saw that there is ContentTools.Bold.apply(element, selection, callback) So I tried something like this :

editable = document.getElementBiId('text_prompt');
ContentTools.Bold.apply(editable, ContentSelect.Range.query(editable));

It does not work because editable is not a member of ContentTools.Node, I tried to load the editor and to put the first region as the first argument of the apply method with no success. What is the right to do what I want to do ?

In /src/scripts/ui/dialogs/table.coffee on line 93 there is a static text "Apply" instead of the translation (ahich exists in the translations files)

@_domApply.textContent = 'Apply'

I couldn't figure out how to fix it because of lack of know-how in CoffeeScript, otherwise I would love to create a PR for this.