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.
Related
I am very new to web designing. I want to create a web page such that when the user is typing in the form, at the same moment that data must be shown on the left side of the same page as in the image below. Example, as the user types in the about me text box, the data area on the left side with about me title should also get updated instantly and dynamically with the same speed the user is typing.
Can anyone please help me how this is possible? or which language will i have to use to do this?
thanks in advance.
example image
You will have to use javascript to achieve this.
<input type="text" id="input">
<div id="output">
</div>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
// add event listener to the input element
input.onkeyup= function() {
// set the output element HTML to what you type in
output.innerHTML = this.value;
}
</script>
Fiddle: https://jsfiddle.net/xpvt214o/124485/
Use the following code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#name').keyup(function () {
$('#display').text($(this).val());
});
});
</script>
</head>
<body>
<input type="text" id="name"/>
<span id="display"></span>
</body>
</html>
Im using summernote wyswyg editor, I write some content in the editor then i save it in the Mysql DB, now when i retrieve the content from DB using php and echo it on summernote, the editor shows the html code instead of the formatted content as we see on wyswyg, please give me some solution for this.
My code:
<textarea id="summernote" class="form-control" placeholder="Article" name="article_content"><?php echo $article_content; ?></textarea>
<script src="summernote-0.7.0-dist/dist/summernote.min.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: "300px"
});
});
var postForm = function() {
var content = $('textarea[name="article_content"]').html($('#summernote').code());
}
</script>
The ideea is good, the problem is how you take the data.
You should use $('#summernote').summernote('code') to take the data, then echo in a div/text area
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>
I'm very new to PHP, so bear with my ignorance. I've got the following script that searches an excel sheet for cell data (it's a really basic company phonebook):
<html>
<?php echo "Search:" ?>
<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF']; ?>"> <label>
<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>
<img src="loading.gif" width="16" height="11" />
</form>
<input type="reset" value="Reset">
<?php
$search= $_REQUEST['search'];
if ($search > ''){ $search = $search;} else { $search = '';}
?>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {legend: 'bottom'});
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="table"></div>
</div>
</html>
When no text is entered and the user clicks submit, the view resets to show the complete excel sheet. I'd like to add a reset button that functions the same way (it makes more sense to the user to have an actual "reset" button.
Edit: Just a note that I'm not trying to simply clear the search input. Essentially, I'd like to replicate what the submit button does when a blank search is performed (which is display all the data).
Add this line to your html form:
<input type="reset" value="Reset">
There are a number of issues here that need to be addressed. I've cleaned out some of the code you posted but I didn't want to totally rewrite everything you did. It looks like you might have copied and pasted a couple examples you found on the web into one project. It really helps if you review what a script does before you put it into production. Doing so will help you with some of these issues. For instance, in one line you check a variable to see if it is greater than empty string. You then assign it to itself if it is and you assign it to empty string if it is empty. Basically, that line does nothing. Read through your code so you know what it does.
In the end, I figured out that you didn't really need PHP for anything. You are simply using it to post back to the server and reload the page. Since you are using JavaScript to actually load your information, I decided to do everything in JavaScript. It makes the page simpler and it prevents unnecessary postbacks. I also formatted your code a bit and cleaned it up some. However, this still needs to be further refined and cleaned up. I just got it to a working state:
<html>
<body>
<input id="search" name="search" type="text" />
<button id="submitQuery">Submit Query</button>
<button id="resetQuery">Reset Query</button>
<div id="table"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['table'] });
var visualization;
var searchTerm = '';
function drawVisualization() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D where upper(A) like upper("%' + searchTerm + '%") or upper(B) like upper("%' + searchTerm + '%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, { legend: 'bottom' });
}
google.setOnLoadCallback(drawVisualization);
$(function () {
$('#submitQuery').click(function (e) {
searchTerm = $('#search').val();
drawVisualization();
return false;
});
$('#resetQuery').click(function (e) {
$('#search').val('');
searchTerm = '';
drawVisualization();
return false;
});
});
</script>
</body>
</html>
Instead of using buttons in a form to do a postback, I made the buttons fill in the variable appropriately and call the function to draw the visualization. I did draw in jQuery to make things a bit easier (note the call to the CDN for it). That made the code cleaner and easier to use. You don't have to do it that way but you will need to rework my code if you take it out.
Let me know if you have any questions. As it stands now, this code should do exactly what you want it to do.
I an working on a project and has encountered a problem. please view the following code.
<iframe name="stus" id="stus" style="display:none;"></iframe>
<form name="water" id="water" method="post" autocomplete="off" action="components/com_pocketsea/assets/new/water.php" target="stus">
<input type="hidden" id="newwatermark" name="newwatermark">
</form>
<div id="posting"></div>
and the code for water.php is
<?php
$newwat = $_POST['newwatermark'];
?>
<script type="text/javascript" src="../../js2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#posting", window.parent.document).html("<?php echo $newwat; ?>").fadeIn('slow');
});
</script>
plz help
In your child window, your window object has a property called opener which points to the window object of the window that opened it. So when you want to insert data entered into a form in the child window into the page of the parent window, you would do:
$('#myform').submit(function(){
opener.document.getElementById('namearea').innerHTML = document.getElementById('nameform').value;
});
I don't know what you want (you did not specified), but I would change my Js code to this:
$(document).ready(function(){
$('#posting').html($newwat).fadeIn('slow');
});