I'm using CKEDITOR to update the body content of various pages on a website. While I have applied the existing stylesheets via config.contentsCss, I need to wrap the editable area in some HTML like:
<div id="contentWrapper">
<div id="content">
[EDITABLE CONTENT]
</div>
</div>
Additionally, I need for only [EDITABLE CONTENT] to be written to the CKEDITOR <textarea> element and not the wrapper.
Anybody have any ideas?
I'd recommend putting your page data into a back-end database, then pulling that into your CKeditor instance and making the update to that rather than attempting to parse your page and pull the code in that manner.
If you are worried about the back-end processing hit to pull from the db you can generate cached pages using the database code.
Related
I'm creating a new website and I will have different pages on it. However, instead of creating new HTML files for each page and an anchor for each, I want all my pages contained in one HTML file. Is it possible in any way?
You can try Vue js or React js or many js frameworks ... which contain components.
Using HTML
You can control HTML page section how tabs working in HTML, take a look in Bootstrap Tabs, or you can hide/show sections using CSS or using JS, you may store HTML for each page in array of js and load that HTML to Body based on URL you create
Using Server Side Language
Also if you need single page application with multiple pages you need a Server Side language, where Database contains your website configurations and you can load based on the URL each page's layout or text like heading forms etc...
I am using tinnymce editor in textarea sections of my project.
when i am inserting the content inserting in database as html code like
<p>Hello, its a test post</p><br/>
but its showing in frontend pretty nice.
the probleme is when i am going to edit page to update the post content are showing as html raw code same to same in data base like
<p>Hello, its a test post</p><br/>
thats why i can't see the images in contents.
please help me to fix the probleme.
Some aspect of your application is escaping the HTML when you go to reload it into TinyMCE. When you want to load the content back into the editor you need to load HTML that has not been escaped.
Say I have a webpage with multiple html documents
ex:
Homepage.html Aboutme.html Contactinfo.html
And at the bottom of all of these pages I want a little message
"Hello and welcome to my website"
But I want to change that later on to something else
"I hope you enjoy my website"
Can I have a separate Html document linked to my other html documents to easily change the code without having to go to each document
So like footer html will contain
<p>"Hello and welcome to my website"</p>
And it shows up on all my pages
then later I change it to
<p>"I hope you enjoy my website"</p>
and then it changes on all my pages
similar to how you can link css files but instead with code
You cannot do this with only HTML - it lacks that capability.
You can do this with PHP, it is called a server-side include, and looks like this. Each page would have, embedded amongst the HTML:
<p>Paragraph on this page</p>
<?php include 'inc/message.inc.php'; ?>
<p>Another paragraph of information</p>
The above would load the contents of a file called message.inc.php and stored inside a folder called inc.
Alternately, you can use jQuery (javascript):
$('.msg').load('inc/message.inc.php');
But first you would need to create an HTML tag with that classname (note the link there - .msg with class="msg") msg could be a P tag, a div, a textarea, section, some kind of container.
<p class="msg"></p>
The PHP include is the better solution because the javascript will run after the DOM has been rendered, which might display a quick flash when the message is injected into the P element.
All that is required to use a PHP include is to use the .php file extension instead of .html -- that's it. If your webserver can do PHP (and most can), then it will instantly work.
Note that using the .php extension will not cause any problems with the HTML/CSS/javascript -- all of that will continue to work as before. The only difference is that NOW it can also handle PHP.
The file message.inc.php could simply be this:
message.inc.php
<p>Your cool message goes here</p>
That's it!
So if it's possible I'd like to echo (or otherwise copy) some text from inside one iframe on a custom page i'm making into another section/div on the page this iframe is on.
Example:
<div 1>
<iframe>
<div inside frame>
Text i would like to echo/copy
</div>
</iframe>
</div>
<div 2>
(another iframe could go here if needed but i was firstly trying to do it without another one.)
Text from the iframe above
</div>
I may not have that 100% right but i'd like to do that and in the second div i'll have a class that makes the text scroll.
The use for this is a twitch stream project i'm working on. This is taking text that shows 'now playing' from a page and making it transparent via having the background color 'chroma key green' and displaying it on the stream.
The other option is if I could have some sort of script to send the text from this div into a text file as it updates and then i could add the text file to the stream instead.
note: I don't mind using php or java/jquery. I was trying to keep the file simple to use and edit most of all. I just wanted to note i'm not as experienced in java and php. I want to do this the simplest way possible.
Thanks!
(I don't want to include all my code, but it's fairly straight forward, all help is appreciated.)
If the parent page and the page inside the iframe are hosted on the same domain, you can access the contents of the iframe directly with something like this on the parent page:
var iframe = document.getElementById('id-of-iframe');
var element = iframe.documentWindow.getElementById('id-of-element-inside-iframe');
For security reasons, this will fail if the pages are not hosted on the same domain.
If the pages are hosted on different domains, but you have access to both (read: you can change the HTML output from the server on both pages), you have another option called cross-document messaging.
This is a bit more complex, and involves scripts on the parent and child page to communicate with each other and send data back and forth.
On the parent page, you would have something like:
window.attachEventListener('onmessage', function (...) {
// Listen for messages from the child page
}, false);
And then in the child page, you would package up the data and send it to the parent with a call like this:
parent.postMessage(...);
Obviously, there are details I've left out here (...), but this is the general idea.
If you don't have access to both the parent and child page, there is no way to achieve what you're asking. Allowing any page to access any other page inside an iframe would be a major security problem. (Imagine if I placed a full-page iframe on my site, loaded Gmail in it, then setup a script to watch the value of the password field.)
I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.