How to create a new paragraph after uploading images?

[Nisthar]

Hi, I can't create a new paragraph tag if the last item i added was a image. Is there any way to create a p tag if the user press enter on an image?

[anthonyjb]

The editor currently allows you to create a new paragraph after an image by selecting the p tool, if you want support for this against an image you could monitor key presses against the document and check to see if the selected element is an image, for example:

document.addEventListener 'keypress', (ev) ->
    # Was the enter key pressed
    if ev.keyCode != 13
        return

    # Is the selected element an image
    selectedElm = ContentEdit.Root.get().focused()    
    if selectedElm and selectedElm.typeName is 'Image'
        # Attach a new paragraph to the parent after the image
        p = new ContentEdit.Text('p', {}, '')
        selectedElm.parent().attach(p, selectedElm.parent().children.indexOf(selectedElm) + 1)

        # Move the focus and selection to the new paragraph
        p.focus()
        selection = new ContentSelect.Range(0, 0)
        selection.select(p.domElement())

[Nisthar]

Ok. Its working. But any problem if i insert a p tag when a user press enter key on an image?

[anthonyjb]

Not that I'm aware of though editable images don't actually hold focus so you might need to handle the event in a more safe way, preventing a submission of example if a form element is focused.

I think it might be a reasonable change to make to the core library to be honest - so I'll convert the status of this post to an enhancement.

[Nisthar]

@anthonyjb BTW any way i can add custom html option in the tool?

[anthonyjb]

@Nisthar can you elaborate a little more? Does this tutorial cover your needs http://getcontenttools.com/tutorials/adding-new-tools or do you have something else in mind?

[anthonyjb]

If you want to insert custom HTML into a content element you can use the code tab when inspecting the element. E.g select the tag in the tag path at the bottom of the page, when the dialog opens select the code icon (<> 3rd from the left), and you'll get a textarea in which you can insert custom HTML.

[Nisthar]

@anthonyjb Any other way like just inputting the raw html in the editing area and it automatically converted into html. I know its a bit difficult and will cost you a considerable time. Is there any workaround like by using a third-party library?

[anthonyjb]

@Nisthar This isn't something I have planned I'm afraid, however @bfintal has something like this in place on his word press plugin for ContentTools (https://pagebuildersandwich.com/) which automatically converts special tags into HTML for example a form can be inserted by entering a pre-defined short tag.

So this is possible - I suspect you need to monitor for the blur event on text elements and then review the content to see if it contains HTML, if it does (under whatever special conditions defined HTML would be converted) then the element would be converted/updated to contain the specified HTML.

@bfintal is this how you're converting tags in your plugin?

[bfintal]

@anthonyjb Yup that's pretty much how I'm doing it.

1. Listen to blur events on Text elements
2. Check the contents of the text element
3. If it's valid html (or another thing), create the new element
4. Swap out the text element with the new element

[Nisthar]

@anthonyjb @bfintal Ok. I'll try it out

[antonkomarev]

Maybe adding blank <p> tag on the end of each page and remove it if it's empty on save will be a solution for this issue?