Is there any html editor like summernote or tinyMCE that allows adding rows and columns from bootstrap?
I have followed #Korgrue advice and I found that I can create custom buttons using summernote too. But my code is putting raw text on the textarea, it doesnt change the html into bootstrap. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
</head>
<body>
<div id="summernote"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script>
$(document).ready(function() {
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'hello',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', '<div class="row">Row</div>');
}
});
return button.render(); // return button as jquery object
}
$('#summernote').summernote({
toolbar: [
['mybutton', ['hello']]
],
buttons: {
hello: HelloButton
}
});
});
</script>
</body>
</html>
Am I missing something?
You can do it in TinyMCE. You have to set up a custom button for the toolbar, and define what content you want it to generate (in html, as a string). Add one for columns, and one for rows. For columns, you will need to define a text field where the user can input the amount of columns and let the onclick handle appending the column count to the html element for you.
https://www.tinymce.com/docs/demo/custom-toolbar-button/
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'mybutton',
menubar: false,
setup: function (editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my button!</b> '); // <--- this line is where you would define the HTML to use on button click.
}
});
},
content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
Related
I have change value in textarea to Decode. I want change from value Decode Html to text normal. How I do it?
$("#editor").kendoTextArea({
change: function (e) {
var value = this.value();
var decoded = $("textarea").html(value).text();
$("#9").text(decoded);
}
});
result example: < strong >sadsadasdas< /strong >.
I want: < strong >sadsadasdas< /strong > =to=> sadsadasdas (normal text)
Here's a kendoTextArea example for you in changing HTML to text. Try this in the DOJO. The HTML is changed into text after two seconds.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<textarea id="description" style="width: 100%;"></textarea>
<script>
$(document).ready(function(){
var textArea = $("#description").kendoTextArea({
value: "<b>Bold text</b>",
rows:5,
change: function(e) {
var value = e.sender.value();
e.sender.value($(value).text());
},
}).data("kendoTextArea");
setTimeout(function() {
textArea.trigger("change");
}, 2000);
});
</script>
</body>
</html>
I am working on a simple react example that will alter the content of a header on the screen based on what a user enters in a text field. Here's the react code:
var GreeterForm = React.createClass({
onFormSubmit: function(e){
e.preventDefault();
var name = this.refs.name;
this.refs.name.value = '';
this.props.onNewName(name);
},
render: function(){
return(
<form onSubmit={this.onFormSubmit}>
<input type="text" ref="name"/>
<button>Set Name</button>
</form>
);
}
});
var Greeter = React.createClass({
//returns an object of the default properties to be used
//these are used if no properties are passed in
getDefaultProps: function(){
return {
name: 'React!',
message: "this is from a component!"
};
},
//maintains a state for the component. Maintains the state as an object
//this is a default method for react and we override it.
getInitialState: function(){
return {
name: this.props.name
};
},
handleNewName: function(name){
this.setState({
name: name
});
},
//renders the greeter react component
render: function() {
var name = this.state.name;
var message = this.props.message;
return (
<div>
<h1>Hello {name}!</h1>
<p>{message}</p>
<GreeterForm onNewName={this.handleNewName}/>
</div>
);
}
});
var firstName = "DefaultName";
var mess = "This is a message from react."
//note that name and message are passed in as properties
ReactDOM.render(<Greeter name={firstName} message={mess}/>, document.getElementById('app'));
You can see that GreeterForm is nested within Greeter and is supposed to alter the content of the h1 tag when the user submits.
However, the content of the h1 tag is not changing. I sprinkled alert(name.value) along the code to ensure the correct name from the input field was being passed around, and that all checked out.
What could it be? Is something wrong with my setState function?
Here's the HTML if needed:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
You are not sending value of input. you are sending whole html element
in onFormSubmit function change this line
var name = this.refs.name;
to
var name = this.refs.name.value;
I want to change the background of div that is clicked. So, how i can access $(this) div in angular?
My code is:
<div id="single" ng-click="changeit()">
foobar
</div>
And function is:
$scope.changeit=function($scope){
// jquery code $(this).css({"background":"#A4A4A4"});
// how in angular ?
}
You can pass the $event and use target to retrieve the current clicked element.
<div id="single" ng-click="changeit($event)">
asad
</div>
$scope.changeit = function ($event) {
$($event.target).css({ 'background': '#A4A4A4' });
}
Using a directive way, you could do it like this :
<div id="single" data-change-color>foobar</div>
And the changeColor directive which adds a click event on the element and changes the color when clicking on it.
(function () {
'use strict';
angular
.module('myModuleName')
.directive('changeColor', changeColor);
changeColor.$inject = [];
function changeColor () {
return {
restrict: 'A',
scope: {},
link: link
};
function link (scope, element) {
element.on('click', onClick(element));
}
function onClick (element) {
return function () {
element.css({ 'background': '#A4A4A4' });
}
}
}
}) ();
DOM manipulation should ideally be the sole domain of directives when using angular. This keeps us from gluing our controller logic into our DOM presentation which makes for a horrible mess. With this in mind Angular has two directives related to styling, ng-style and ng-class. Ng-class is demonstrated below.
https://docs.angularjs.org/api/ng/directive/ngStyle
https://docs.angularjs.org/api/ng/directive/ngClass
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
.active{
background:red;
}
</style>
</head>
<body ng-controller="ctrl">
<button ng-click="activeButton = 1" ng-class="{'active' :activeButton==1}">Button 1</button>
<button ng-click="activeButton =2" ng-class="{'active' :activeButton==2}">Button 2</button>
<button ng-click="activeButton = 3" ng-class="{'active' :activeButton==3}">Button 3</button>
<script>
var app = angular.module("app",[]);
app.controller("ctrl",function(){});
angular.bootstrap(document,[app.name]);
</script>
</body>
</html>
I am trying to create a popup window in a map. I have tree layers in my program; the first two layers are working; the third layer where I have template is defined doesn't work, though. In the console I get following errors:
Error: Unable to draw graphic (null): Unable to complete operation.
...usePost,v=h.crossOrigin):A=!!h);g=e.mixin({},g);g._ssl&&(g.url=g.url.replace(/^h...
I tried to solve this problem, by adding time between the layers. It didn't work.
Below is my code. Please let me know if I am making any mistake. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title> Trees Location</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require(["esri/config", "esri/map","esri/dijit/Popup",
"dojo/dom-construct",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/Color",
"dojo/domReady!"],
function (esriConfig, Map,Popup,domConstruct, PopupTemplate, FeatureLayer,SimpleMarkerSymbol, GeometryService, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Color ) {
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};
var popup = new Popup(popupOptions, domConstruct.create("div"));
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8,
infoWindow: popup
});
var popupTemplate = new PopupTemplate({
title: "{MEMORIAL}",
fieldInfos: [
{
fieldName: "TREEDONOR",
visible: true,
label: "Type"
},
{
fieldName: "TREESPECIES",
visible: true,
label: "Type"
},
{
fieldName: "TREEVARIETY",
visible: true,
label: "Type"
}
]
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"");
map.addLayer(customBasemap);
/* setTimeout(function(){
console.log("pausing a few seconds");
map.addLayer(customBasemap);
},1000); */
var treeLayer = new ArcGISDynamicMapServiceLayer(
"");
// map.addLayer(treeLayer);
setTimeout(function(){
console.log("pausing a few seconds");
map.addLayer(treeLayer);
},1000);
var featureLayer = new FeatureLayer("",
{
infoTemplate: popupTemplate,
outFields: ["TREEDONOR","TREESPECIES","TREEVARIETY", "MEMORIAL"]
});
featureLayer.setDefinitionExpression("MEMORIAL != ''");
map.addLayer(featureLayer);
});
</script>
</head>
<body class="claro">
<div align="center"><strong> Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Lately, I'm having trouble with jQuery click events. In this example, I'm wanting to use ajax post when an user clicks on a list item. No errors pop up on Firebug and the jquery script is in the code. When I run the code, nothing happens. The code is below.
<script type="text/javascript" >
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_file.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});});
</script>
<ul>
<li id="pop">Pop</li>
</ul>
Try this:
$(document).ready(function(){
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_style_homepage.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});
});
})
Wrap it in the document ready function and see what happens. Also you dont need to empty. You can call the html method and it will overwrite the content.
$(function(){
$('#pop').click(function() {
var pop = 'pop';
$.post('ajax_style_homepage.php', { style: pop}, function(data) {
$('#tube').html(data);
});
});
});
Just another way to do the same thing as the 2 other answers without binding your click method at page load. Simply set your onclick attribute on your list item to a function containing your ajax call. This is easier to follow in my opinion.
<script type="text/javascript" >
function makeAJAXPost(){
var pop = 'pop';
$.post('ajax_file.php', {
style: pop
}, function(data) {
$('#tube').html(data);
});
}
</script>
<ul>
<li onclick="makeAJAXPost()" id="pop">Pop</li>
</ul>