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.
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 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
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 finally got some parts working here: http://jsfiddle.net/trXBr/5/
but when I put the code back into my project and tried to browse using internet explorer; the button onclick events do not work. Interestingly the one button onclick function to show the dialog works in firefox and chrome. I was excited to have this working in the editor but now if this does not work with all browsers, then this is just really frustrating. I am using version 1.5.1
dojo.connect(loadBtn,'onClick',function(){
userDialog.show();
});
dojo.connect(butt,'onClick',function(evt){
showTab();
});
Any help/ideas appreciated.
EDIT:
Ok using the compatibility mode in IE helps to get the one function working which displays the dialog box.
So as you can see here I have an borderlayout where I want a tabcontainer to be displayed in the middle with a click of a button and this works fine in jsfiddler but not from my code in the browsers;
<div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
<div id="mainTabContainer"dojoType="dijit.layout.TabContainer"
style="width:500px;height:100px;display:none">
<div id="tab1" dojoType="dijit.layout.ContentPane"
title="First Tab" selected="true"
closable="true">First Tab</div>
<div id="tab2" dojoType="dijit.layout.ContentPane"
title="Second Tab" closable="true">
Second Tab
</div>
</div>
</div>
so the display:none but when I click the button I call the following:
dojo.connect(butt,'onClick',function(evt){
showTab();
});
function showTab(){
dijit.byId("mainTabContainer").domNode.style.display = 'block'
dijit.byId("mainTabContainer").resize();
}
Also if I remove the display=none then the tabcontainer appears fine. So is these something wrong with my function call.
ok sorry guys....all my fault here...I forgot to remove the added code I had in my html in my asp.net code
<body class="claro">
<form id="form1" runat="server">
<asp:ScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ScriptManager>
Once I removed the form and scriptmanager lines it works fine..Thanks for everyones efforts.
Just worried that if I were to incorporate ajax and other controls, then would dojo still work
When launching a modal radwindow in IE 6, any dropdown's visible on the parent page are hidden. Once they are hidden, they are gone even after the modal has been closed. These are pure ASP.NET dropdownlists. There is nothing special about the dropdown's that are hidden - I can add new dropdowns to the page with nothing in them, and they still go away on launch. Any ideas out there?
I am using ASP.NET 3.5, 2009 Q3 of Telerik's ASP.NET AJAX Controls, testing with IE 6 (6.0.2600) on a virtual machine running Windows 2000.
While the issue was initially encountered on a much more complex page, I have created a brand new page, no css, just bare-bones elements, and it still happens in IE 6.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits=".WebForm1" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="manager1" runat="server">
</telerik:RadScriptManager>
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 2</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btn1" runat="server" OnClientClick="ShowModal(); return false;" Text="click" />
</div>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function ShowModal() {
var wnd = radopen('<%=ResolveUrl("~/register.aspx") %>', null);
wnd.set_modal(true);
wnd.center();
wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Resize);
wnd.show();
return false;
}
</script>
</telerik:RadScriptBlock>
</form>
</body>
</html>
It appears that when showing the radwindow with modal being set to true, the dropdown's visibility attribute is being set to hidden. With modal being set to false, the dropdown is fine...
Thanks
Dan Appleyard
We've talked in Telerik's forum and I just wanted to add the info here as it could be of help for other users:
The problem here is with the logic. With your code you do the following:
open the RadWindow control
set its modal property to true. In this case we are hiding the dropdowns in IE6.
set the behaviors of the control
center the window (I assume you do this to redraw the window after setting its behaviors).
You call the show() method again. Because you are calling show() for a window that is modal, the code that hides the dropdowns is run again - that is the reason for them not being visible after the window is closed.
To avoid the problem, I suggest not to call show() again, but to call the center() method last.
RadWindow explicitly hides the dropdowns in IE6 because prior to IE7, dropdowns and list items were heavyweight objects that were rendered above all DHTML elements on the page, including the modal background of RadWindow. This made possible for users to still use the dropdowns on the parent page even if a modal RadWindow was shown.
To avoid that we disable the dropdowns if the browser is IE7+ and hide them completely if it is IE6.
What version of ASP.NET are you running, and what version of Teleriks Rad Window? I have had a lot of issues with older versions, but their new versions seem to be working great.
I'd test it out on a separate page.
Create a new page with a few DDL's randomly filled
Add a basic rad window control to it - and hook it up so it can be invoked
See if you can recreate the issue. If you can't, then it's most likely something with CSS, JavaScript or the HTML markup.
Edit:
Also remember IE6 has drop down issues. Usually the main issue is the dropdown list is always above every other control, but I wouldn't hold my breath if it's something browser related.