search

GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.94k stars 393 forks source link

Can't edit files that were included or read by php #568

Closed ElStefanos closed 3 years ago

ElStefanos commented 3 years ago

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.

ElStefanos commented 3 years ago

I would really appreciate if someone responds to this issue.

anthonyjb commented 3 years ago

Can you Post the HTML that's generated by your PHP application that can't be edited?

ElStefanos commented 3 years ago 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <section>
      <h1>1</h1><h2>2</h2><h3>3</h3>
    </section>
  </body>
</html>

This is inside the file I'm including with php.

$content = file_get_contents('../assets/themes/default_theme/extensions/pages/html/'.$file.'.html'); echo '<div data-editable data-name=heading>'.$content.'</div>';

And this is a php script that loads the file.

anthonyjb commented 3 years ago

Sorry so the HTML has no editable regions so that's why the editor wont show, is this the HTML output by the PHP? If so why isn't it like:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <section>
      <div data-editable data-name=heading>
          <h1>1</h1><h2>2</h2><h3>3</h3>
      </div>   
 </section>
  </body>
</html>
ElStefanos commented 3 years ago

The output from php is:

      <div data-editable data-name=heading>
          <h1>1</h1><h2>2</h2><h3>3</h3>
      </div>

First time i did as you in the code you provided and i didn't even had yellow indicator that it is editable.

anthonyjb commented 3 years ago

OK I don't know why the PHP isn't including the <div data-editable...> after the first time, but lets try to figure out why you can't edit the page event when it contains the editable region. I assuming you've sent me a simplified version of the page as there's no JS or CSS includes in the template, could you send through or post some where the full HTML output and the JS you have for initialising the editor.

ElStefanos commented 3 years ago

This is the function that loads chosen page it's on line 305. This is the page where content tools is. And this is a folder where i stored Content Tools.

anthonyjb commented 3 years ago

Cool ty - OK since I can't run this myself to test can I ask you do the following and let me know:

If I can't work it out from this maybe we could catch up on discord or something and you can screen share so I can work through it with you?

ElStefanos commented 3 years ago

Thi is the output of HTML `

1

2

3

` No errors on console. And there is no output.
anthonyjb commented 3 years ago

OK so that looks like some how the editable region <div data-editable data-name="heading">...</div> included the section tag in it and so the editor interpreted that as a static element (one it can't edit) and that's why it has class="ce-element ce-element--type-static" against it. However, class="ce-element ce-element--type-static" would only be applied when you edit the page those classes are only applied when you click to edit and CT parses the page content) so I must be missing a step here.

If you don't use PHP to drag in data dynamically and you replace <?php PageEditorLoad($conn); ?> with 

<div data-editable="" data-name="heading">
    <h1>Testing</h1>
</div>

Are you able to edit the heading in this case?

ElStefanos commented 3 years ago

Yes i'm able to edit after i replaced <?php PageEditorLoad($conn); ?> with 

<div data-editable="" data-name="heading">
    <h1>Testing</h1>
</div>

Should i somehow exclude <section> from files im trying to load? Also am i able to edit if i have:

<div data-editable="" data-name="heading">
    <div class='blah'>
        <h1>Testing</h1>
    </div>
</div>
anthonyjb commented 3 years ago

ContentTools only handles a subset of tag/element types for editing. You can have multiple editable regions in a page and these can be any block level element pretty much, but they can only contain elements CT supports, unsupported element types will still appear but will be marked as static and you wont be able to edit them or their contents, the following is OK for example:

<section class="header">
    <div data-editable data-name="heading">
        <h1>Testing</h1>
    </div>
</section>
ElStefanos commented 3 years ago

I see so there is no way i can edit something that is in this format. 

<div data-editable="" data-name="heading">
    <div class='blah'>
        <h1>Testing</h1>
    </div>
</div>

Well thanks anyway for the help i appreciate that!

anthonyjb commented 3 years ago

So not using that structure no. We can typically work around these restrictions (the CT site for example is all done with CT as is) but form more complex sites we use the ContentFlow library - however - this isn't documented so it's hard to get started with I'm afraid.

Sorry I couldn't be more helpful :

ElStefanos commented 3 years ago

Well can i implement it in my project? Do i need to have node.js or something that needs to be installed by git?

anthonyjb commented 3 years ago

Both ContentTools and ContentFlow are client side libraries, neither require node, any backend you want to use is fine - though it's quite a bit of work to set up support for ContentFlow currently, this is something I hope to improve in future releases.

ElStefanos commented 3 years ago

Okay thanks for the info i will keep my eyes on ContentFlow!