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.
Related
I have an asp.net site, .net 4 framework. I'm trying to get the ckeditor up and running. Sorry, I'm a bit new to the ckeditor. There is a quick start guide here that shows you how to implement:
http://docs.ckeditor.com/#!/guide/dev_installation
I originally thought the editor wasn't showing the toolbar. However, after further debug, I believe the ckeditor isn't showing at all, and in fact, the textarea is still all that is showing.
I'm using the same code as on the example in the website. I've reposted that here:
<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>
I've included the script ckeditor.js script this way:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DefectEntry3.aspx.cs" Inherits="DefectWriter.DefectEntry3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="App_Data/ckeditor/ckeditor.js"></script>
I'm sure I'm making a simple mistake. Any help is appreciated.
Thanks!
Bob
I had the wrong path in the script source. Once I got the right path all is well.
I want to use ckeditor in a web page created in spring mvc 3.1. It is maven project.
I downloaded required files from http://ckeditor.com/download. I added taglib
<%# taglib uri="http://ckeditor.com" prefix="ckeditor" %>
on the head section.
In form, I wrote the code below. path="aciklama" is the property of my class. I want to bind data retrieved from ckeditor.
form method="post" modelAttribute="my class name">
.......
.....
<form:textarea cols="80" id="editor1" name="editor1" rows="10" path="aciklama"></form:textarea>
</form>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
</body>
I also added these scripts, but it did not work:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
When I click the path, it isn't going to the related file. My ckeditor folder is under webpages. When I pass through files tab, It is shown under the webapp folder.
You can use this link for the reference
May be you have path problem i.e it is unable to find your ckeditor.js
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>
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
I have a MVC3 view, local debug perfectly fine, after I deployed to server I found unobtrusive validation is not fired at all.
I saved the output to a static HTML file and get rid all unnecessary codes and with following section remaining
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Dummy
</title>
<link type="text/css" href="/Content/site.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.6.4.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<form action="/Test/Dummy" data-ajax="true" data-ajax-complete="MyDummy.OnComplete" data-ajax-method="Post" id="form0" method="post">
<select data-val="true" data-val-number="The field SourceId must be a number." data-val-required="SourceId required." id="SourceId" name="SourceId"></select>
<span class="field-validation-valid" data-valmsg-for="SourceId" data-valmsg-replace="true"></span><br />
<select data-val="true" data-val-number="The field DestinationId must be a number." data-val-required="DestinationId required." id="DestinationId" name="DestinationId"></select>
<span class="field-validation-valid" data-valmsg-for="DestinationId" data-valmsg-replace="true"></span><br />
<input type="submit" value=" Submit " class="ButtonStyle" />
</form>
<script type="text/javascript">
var MyDummy = {
OnComplete: function (content) {
alert(content.responseText);
}
}
</script>
</body>
</html>
I believe I have included proper JavaScript files, all the rendered Html looks fine to me. When I click on the submit button I expect validation message, but instead the oncomplete event fires.
I am very lost here, anybody has clue what is wrong?
Edit 1, I copied the same static Html file to my local project's folder and access it via http://localhost:48194/test.htm (my local ASP.NET Development Server) and everything works fine. But if I load the same file from 2008 server's local IE8 at http://localhost:87/test.htm (IIS 7) then I got the issue. Somehow it leads me to think is there something wrong setting IIS7 which blocks or partially blocks the access to JavaScript files properly?
Edit 2,
If I change the JS reference to use CDN like
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js"></script>
Then it works. I really don't know now what IIS7 could do to damage the local JS file transportation.
I does sound like IIS blocks the javascript.
In IIS you can set filters for which files are allowed or denied. Maybe for some reason someone (accidentally) blocked .js? - Another issue could be file access. IIS normally runs under a different user, so maybe it does not have access?
But I'm kind of just guessing. So the easiest way to test this is to just visit the .js file directly. So just open your http://localhost:87/Scripts/jquery-1.6.4.js and check what IIS returns. Maybe it returns a 403 error, maybe something else, at least it'll probably help to figure out what's wrong.
#section Scripts
{
<script src="../Scripts/jquery.validate-vsdoc.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.min.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.min.js"></script>
}