Why doesn't the ck editor load the last change that I made in source mode?
If I have disabled the ck_editor, then the textarea will show all the data.
This is my code:
<textarea name="content" id="editor1" rows="10" cols="80">
<?php print $selecteddata['content']; ?>
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'content' ,{
filebrowserBrowseUrl : './public/browse.php',
filebrowserUploadUrl : '/uploader/index.php',
uiColor : '#9AB8F3'
});
</script>
it was about CKEditor Data Filtering and Features Activation .
the answer was here.
CKEditor automatically strips classes from div
Try this:
<textarea name="content" id="editor1" rows="10" cols="80">
<?php print $selecteddata['content']; ?>
</textarea>
<script>
$(window).load(function(){
if (typeof(CKEDITOR.instances['content'])=='undefined') {
CKEDITOR.replace( 'content',{
filebrowserBrowseUrl : './public/browse.php',
filebrowserUploadUrl : '/uploader/index.php',
uiColor : '#9AB8F3'
});
}
});
</script>
Related
I would like to understand why my <textarea> box contains white space when I land on the page. I have put in place an if(empty ($_POST['textarea']) to check if it has text before submission. I couldn't get the if(empty ($_POST['textarea']) to work at first until I noticed white space in the <textarea>. As soon as I remove the white space the if(empty ($_POST['textarea']) condition works.
Before I ever click into the textarea there's already white space - Why is this happening and how can I prevent it?
Here is my code.
Text-Area:
echo '<div id="container">
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >
</textarea>
</div>
I'm using jQuery to send via AJAX:
<script src="js/jquery.js"></script>
<div id="showResult"></div>
<script>
$(document).ready (function()
{
// Focus on textarea
$('#name').focus();
// '#msg' id of button
$('#msg').on('click', function() {
//to disable button after click
this.disabled = true;
// '#name' is the id value of textarea name
var info = $('#name').val();
$.ajax ({
method: "POST",
url: "actions/message_action.php",
//pass my variables to ajax - jq here in data name:
data: {name: info, recptid: '<?php echo $_GET["id"]; ?>'
},
//feed the success my data to return results
success: function(data){
$('#data').append(status);
$("#showResult").text(data);
//window.alert(data);
$('#data').val('Sent');
}
});
return false;
});
});
</script>
The white space is generated by the way you have formatted your HTML:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >
</textarea>
This creates a space and newline in the textarea. Change your HTML to this:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" ></textarea>
EDIT
I can see that you have named your textarea name, which indicates to me that you might want to use a <input type="text"> instead, since textareas are for multiline text.
Use can use trim to remove whitespace in your textbox, before and after possible content:
var info = $('#name').val().trim();
It's because you have space in between
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >// this creates space
</textarea>
Use
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" ></textarea>
Try putting the closing </textarea> tag on the same line removing the white space.
I am trying to integrate Codemirror to one of my view in Yii 1
but the result is not good.
Please help me.
In Controller: I registered
$cs->registerScriptFile($baseUrl.'/js/codemirror.js', \CClientScript::POS_BEGIN);
$cs->registerScriptFile($baseUrl.'/js/php.js', \CClientScript::POS_BEGIN);
In view.php
<textarea id="editor" name="editor" rows="10" style="width: inherit;">
<?= htmlentities($model->diff_content); ?>
</textarea>
<script type="text/javascript">
var e = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "application/x-httpd-php"
//theme: 'blackboard'
});
/*function app() {
var txt = "myText";
$('textarea#code').text(txt);
}*/
</script>
Result:
thank you very much
I found the answer for my question
$cs->registerCssFile($baseUrl.'/css/codemirror.css', \CClientScript::POS_BEGIN);
It will generate
and this is the problem
I have to change to
$cs->registerCssFile($baseUrl.'/css/codemirror.css');
without \CClientScript::POS_BEGIN
Everything back to work.
I want use ckeditor 4.3.4 to codeigniter 2.1.4 i tried to start testing it in jsbin, it did not work.what do i do?
How can you use ckeditor 4.3.4 in codeigniter 2.1.4?
How can install ckeditor basic?
DEMO: http://jsbin.com/lacekiyu/1/edit
Code:
<html>
<head>
<script src="www.ckeditor.com/apps/ckeditor/4.3.4/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</body>
</html>
1). Change your ckeditor js link to correct url: http://ckeditor.com/apps/ckeditor/4.3.4/ckeditor.js.
2). Add body onload event, and it will work.
<html>
<head>
<script src="http://ckeditor.com/apps/ckeditor/4.3.4/ckeditor.js"></script>
<script>
function init() {
CKEDITOR.replace( 'editor1' );
}
</script>
</head>
<body onload="init()">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</body>
</html>
You need to correct the reference to the CKEditor script and add the CSS class ckeditor to the textarea.
<head>
<script src="http://ckeditor.com/apps/ckeditor/4.3.4/ckeditor.js"></script>
</head>
<body>
<form>
<textarea class="ckeditor" name="editor">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</body>
You could host the CKEditor JavaScript on your server. Assuming it is stored in a folder in your web root, called assets (e.g. public_html/assets) and the URL helper is loaded, you can reference it in a view:
<script src="<?php echo base_url("assets/ckeeditor.js"); ?>"></script>
i am trying to send the value of text area into database but i am unable to get the values of text area. and also i want once data is saved to database i want to show that data in text area. kindly help me.
Thanks.
here is my code.
<script type="text/javascript" >
function save()
{
var mail = {
aboutus: $('textarea#area1').val(),
services: $("#area2").val(),
contact: $("#area3").val()
};
$.ajax({
url: "user_stall_add.php",
type: "POST",
enctype: "multipart/form-data",
data: mail,
success: function(data) {
alert("Content Added");
}
});
}
</script>
<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<h4 style="margin-left:4em;">About Us Content</h4>
<textarea name="area1" id="area1" style="margin-left:4em;" cols="60" rows="10"></textarea>
<input type="button" style="margin-left:4em;" value="Save" onclick="save();"><br />
<h4 style="margin-left:4em;">Services Content</h4>
<textarea name="area2" id="area2" cols="60" rows="10">
Some Initial Content was in this textarea
</textarea>
<input type="button" style="margin-left:4em;" value="Save" onclick="save();"><br />
<h4 style="margin-left:4em;">Contact Content</h4>
<textarea style="margin-left:4em;" id="area3" name="area3" cols="60" rows="10">
HTML <b>content</b> <i>default</i> in textarea
</textarea>
<input style="margin-left:4em;" type="button" value="Save" onclick="save();"><br />
</div>
You have used nicEditors,
var aboutus = new nicEditors.findEditor('area1').getContent();
var services = new nicEditors.findEditor('area2').getContent();
var contact = new nicEditors.findEditor('area3').getContent();
var mail = {
aboutus: aboutus,
services: services,
contact: contact
};
REF: http://nicedit.com/demos.php
Doc: http://wiki.nicedit.com/w/page/521/Javascript%20API
Returns the current HTML of the nicInstance
For example:
nicEditors.findEditor('myArea2').getContent();
returns the HTML in the content editor that replaced the element on the page with ID 'myArea2'.
try
aboutus: $('textarea#area1').val(),
services: $('textarea#area2').val(),
contact: $('textarea#area3').val()
Please try $('#area1').val() to match your other textarea(s). Also, make sure there is a value in the textarea - or you'll get an undefined. Finally, your sample works fine when I just use
function test() {
// These both work for me.
console.log($("textarea#area1").val());
console.log($('#area1').val());
}
I am trying to make simple web editor using CKEditor but i cant find out how to make it work.
First i checked their samples site. Only thing they do to make CKEditor work is include .js file and add ckeditor class to form textarea element.
<script src="../ckeditor.js"></script>
.
.
.
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
So i copy .js file and try it in my own folder and when i run php script whole textarea element is hidden and doesnt create CKEditor panel as it should like in this sample page. There might be some javascript configuration but i havent found any in source code of sample page.
call CKEDITOR.replace( 'editor1' ); in your js files or simply in your html file like this:
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
<script>
CKEDITOR.replace( 'editor1' );
</script>
Copy all of your ckeditor folder to server.
Add it to html page ;like this:
<script src="../script/ckeditor/ckeditor.js" type="text/javascript"></script>
Assign CSS class of ckeditor to textarea; like class="ckeditor".
<script src="../ckeditor.js"></script>
<form name="ckeditor">
<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>
As given in the main website.
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<form method="post">
<textarea name=msg id="editor">Text</textarea>
<input type="submit">
</form>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => { console.log(editor); })
.catch(error => { console.error(error); });
</script>