I try to get the value in JQTE Text Editor . I want to get only values without any HTML element or design.
I tried this bus this is giving me styles also in the values when I do some styling on UI . But I want only value without style. Any help would be great for me .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Crea Application</title>
<link href="css/jquery-te-1.4.0.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../js/thirdparty/jquery-1.11.2.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<!--<![endif]-->
<script src="js/thirdparty/jquery-te-1.4.0.min.js"></script>
<!-- <script src="js/thirdparty/jquery.cookie.js"></script>
<script src="js/thirdparty/jquery.loadmask.min.js"></script>
<script src="js/thirdparty/jquery.maskinput.js"></script>
<script src="js/thirdparty/jquery.bpopup.js"></script>
<script src="js/thirdparty/jquery-date-time.js"></script>
<script src="js/thirdparty/jquery.datetimepicker.js"></script>
<script src="js/thirdparty/jquery-timepicker.js"></script>
<script src="js/thirdparty/jquery-center.js"></script>
<script src="js/thirdparty/jquery.jqdock.js"></script>
<script src='js/thirdparty/jquery.scrollto.js'></script>
<script src='js/thirdparty/moment.js'></script>
<script src='js/thirdparty/bowsy.js'></script> -->
</head>
<body>
<textarea cols="2" rows="3" name="textarea" class="jqte-test" id="mytextarea"></textarea>
<button class="status">Toggle jQTE</button>
<script type="text/javascript">
$(".status").click(function()
{
// alert($("textarea#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
console.log($("#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
});
</script>
</body>
</html>
Since the field is nested inside of the jqte block you can go up the DOM to get to a level that allows just getting the text:
For example if your field was "emailsubject":
$("#emailsubject").closest(".jqte").find(".jqte_editor").eq(0).text();
So going up the DOM we find the closest element with the style ".jqte", then we go down the DOM to find the next style of ".jqte_editor". Since this will be a jQuery object, we need to get the first occurance with .eq(0) and finally just get the text with .text()
You can simply remove the HTML formatting with:
var myContent = $('.jqte-test').val();
var final = $(myContent).text();
Related
I have some confusion. I need to sure that is jQuery's append method` create the DOM-based XSS attack. I am providing my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<select class="form-control" id="cmbEnrollProcess" name="cmbEnrollProcess"></select>
<button type="button" id="btn" onclick="xssecho();">Add</button>
<script type="text/javascript">
function xssecho(){
var options = "<option value=''>Select Enrollment Process</option>";
console.log('option',options);
$('#cmbEnrollProcess').html("");
$('#cmbEnrollProcess').append(options);
}
</script>
</body>
</html>
Here I am adding the option value dynamically using jQuery's append method. I need to find out whether this method create the DOM based XSS attack or not ?
Not sure what you are asking... but adding element with strings can open up for attacks... Example:
var value = "'><script>console.log(`dang`)</sc"+"ript><option>"
var options = "<option value='"+value+"'>Select Enrollment Process</option>";
$('select').append(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
one way to be safe is creating the value like this with jQuery:
var options = $('<option>', {
text: 'Select Enrollment Process',
value: 'few'
})
$('select').append(options)
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I have a div in which I have some contend in that .I need to search text from that div and highlight the word (using css class).using next it search next word occurrence and previous occurrence.
I am able to make in jquery as example in fiddle
http://jsfiddle.net/3MVNj/5/
can you please suggest how I will achieve this in angular js ?
plunker
http://plnkr.co/edit/V805fEjJAUbAZIuafJcW?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<style>
.highlightedText {
background: yellow;
}
</style>
<body>
<div ng-controller="contr">
<input type="text" ng-model="searchtext" />
<button ng-click="searchFirst()">FirstText</button>
<button ng-click="nextSearch()">NextSearch</button>
<button ng-click="preSearch()">PreviousSearch</button>
<div id="contend">hello I need to search text from the contend
.On click of search it search the first word.
</div>
</div>
<script>
var app=angular.module('app',[]);
app.controller("contr",function($scope){
$scope.searchFirst=function(){
alert('search First text')
}
$scope.nextSearch=function(){
alert('nextSearch')
}
$scope.preSearch=function(){
alert('preSearch')
}
});
</script>
</body>
</html>
is there any way to search filter ?
you can use your old search algorithm, as an example: http://plnkr.co/edit/As9iyCVtMMNH7lyprJA9?p=preview
what is added is
<button ng-click="searchFirst(searchtext)">FirstText</button>
example search, forward only (prev implementation not AngularJS related)(see link for running example):
Try searching "sear"... have tested on that word only... =)
app.controller("contr",function($scope){
var searcher = new Searcher();
var div = angular.element(document.getElementById('content'));
$scope.searchFirst=function(str){
searcher.setOffset(0);
searcher.setContent(div.text());
div.html(searcher.search(str));
}
$scope.nextSearch=function(){
div.html(searcher.search());
}
$scope.preSearch=function(){
// you implement
}
});
i want to use tinymce editor but my final html file must not contain any links to any sources or css files.
i mean there must not be any references to external resources, it should be embedded in one html
(all js files and css files)
performance is not important and the target browser is ie11 only.
i do not want any
<script src=".."> or
<link rel="stylesheet" type="css" href="..">
i want that
<script>
function tinymce..
</script>
same as style info also should be in this html without any reference to outside.
due to the limits of native browsers on java applictions (djbrowser), i can deploy one one file, i do not go
deeply into technical details of ie11 with dj.
is that possible? or any method? because when i copy paste tiny_mce.js directly into the html it fails. The reason may be dynamically created scripts which are made by document.write.
my test cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- DO NOT CHANGE TITE -->
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/content.css">
<style>
.mce-widget.mce-tooltip { display : none !important; }
</style>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/table/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/contextmenu/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/paste/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/editor_template.js"></script>
<script type="text/javascript" src="tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/langs/en.js"></script>
<script type="text/javascript">
function init() {
// Check that tinymce exists
if (typeof tinyMCE === 'undefined') {
alert("tinymce.js is missing");
return;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "lists,style,linespace",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,listbox",
theme_advanced_buttons2 : "cut,copy,paste,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : "true"
});
}
// Sets content
function JH_setData(html) {
try {
var oEditor = tinyMCE.activeEditor;
oEditor.setContent(html);
//Check whether decoding needed
//oEditor.setContent(decodeURIComponent(html));
} catch(e) {
//alert('exception occured' + e.description + ' ' + e.message);
return 'FAIL';
}
return 'OK';
}
// Gets the content
function JH_getData() {
var oEditor = tinyMCE.activeEditor;
var val = oEditor.getContent();
return val;
}
function setContent() {
JH_setData('test content');
}
function getContent() {
var content = JH_getData();
alert('content:' + content);
}
</script>
</head>
<body onLoad="init();">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%;height:100%"></textarea>
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:600px;width:80px;height:23px" value="SetContent" onClick="javascript:setContent();">
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:700px;width:80px;height:23px" value="GetContent" onClick="javascript:getContent();">
</body>
</html>
works, but if i copy pase the tiny_mce.sc into a script block whole page fails.
if i replace
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
with
<script type="text/javascript">
//content of tiny_mce.js
(function(d){var a=/^\s*|\s*$.....
</script>
it fails
Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>