How to integrate CKEditor 4 in php page? I looked at similar topics such as how to add or embed CKEditor in php page, but when I extracted the zip file there is no file called ckeditor.php.
At the moment there's no PHP connector for CKEditor v4 as some features are still waiting to be ported from v3. Some people reported successful integration of v3 connector into v4 so you can always give it a try and use the code from the latest 3.6.x package.
See the post on the form to know more.
Sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
Related
Is it possible to use the same ckeditor that TYPO3 (8.7.11) uses in the frontend too?
I have to implement a user form with an editor and I want the frontend user to see exactly the result that is displayed in the backend - so I need to use the same editor.
Is there a way to use the same editor without installing the ckeditor plugin a second time? Maybe any functions to easily include it or something?
If you have already configured the CK-Editor it should be only a matter of creating something like this in your Template:
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
The ckeditor.js should be inside your Typo3-source-folder under:
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/ckeditor.js
The code-example is taken from the CKEditor 4 Dokumentation which can be found here:
https://ckeditor.com/docs/ckeditor4/latest/guide/index.html
EDIT:
After testing this Code myself, I noticed that this does not work since the Typo3-Installation of CKEditor is missing the style.js-file which includes the
style-definition.
I downloaded the standard version of CKEditor from here:
https://ckeditor.com/ckeditor-4/download/
And inserted the style.js-file (located at the root level of the folder) in the same directory my ckeditor.js is located.
After adding the file, including this Code:
<script src="/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/ckeditor.js"></script>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
inside of any Template shoud add the ck-editor.
I am using the CKEditor on my website to take input from users. When HTML code is copied from page and pasted into CKEditor, it is converted into the corresponding page. I mean When I insert this:
<html>
<head>
<title>Upload Image</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<form action="Upload02" method="post" enctype="multipart/form-data">
Image<input type="file" name="image" id="image" accept="image/jpg">
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
It is converted into this:
I reported this issue to the CKEditor official website, but I got no help from them. I am using the CKEditor 4.5.8 full version. It is working properly in their demo, but not in the actual implementation. It is giving a problem only in copy-paste. In normal typing it's working properly. What can I do?
I am trying to use summernote in my web app, after i followed the steps provided here http://summernote.org/getting-started/#installation
When i test in browser, it only shows the resize handle at the bottom of the editor, toolbars are not loaded at all. I dont know if there is anything outside the steps provided by the sunnernote instructions. Pls help me out cos am stock here, i dont want to use another editor. Thanks for stopping by..
Thanks for reporting. Could you try below link again?
http://summernote.org/getting-started/#installation
Actually I'm creator of summernote. I updated library path with protocol.
If It's still not working, save below contents with index.html and open it with browser again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
PROBLEM SOLVED
I had the bootstrap.js refrenced before jquery.min.js,
all i did was to reference jquery before any other .js file
enter link description here
It helped me but it will help you too
<div class="container pt-2">
<div id="makeMeSummernote">
</div>
<div class="mt-2 text-center">
<button id="btnToggleStyle" class="btn btn-primary">Toggle Corrected Styles</button></div>
I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
I tried to install ckeditor in php but no result :S.
i have uploaded ckeditor file into the root of the site and i have a editor.html file where i have this code:
<html>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<form method="post">
<p>
My Editor:<br />
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
when i open the page it doesnt show the toolbar except a simple textarea.
Does any of you knows what I am actually missing here?
I don't know if this was your case, but in case it helps anyone else in the future...
I was adding CKEditor to my project and the toolbar wasn't showing for me either. I could tell the javascript file was loaded (and css files). There were no javascript errors either.
Eventually I narrowed it down to a conflict between a jquery plugin (jquery.stylish-select) and CKEditor. When I removed the plugin, the toolbar showed up perfectly.
Maybe you can try this:
CKEDITOR.replace('editor1', {width: 1050, height: 500, uiColor: '#e1e1e1'});
that means, you change the size....
So, can be, that it is better to use this CODE