I am using the SunEditor alongside AngularJS, my intent is to get the content of the richtext box and pass it to Angular JS, I have tried ng-model but it doesn't seem to work. Is there any solution available for getting the all the html contents written inside the SunEditor rich textbox? I want to get the text and also the html content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="https://github.com/JiHong88" />
<meta name="keywords" content="wysiwyg,editor,javascript,suneditor,wysiwyg eidtor,rich text editor,html editor,contenteditable,위지위그 에디터 웹에디터">
<meta name="description" content="Pure javascript wysiwyg web editor" />
<title>SunEditor</title>
<!-- suneditor -->
<link href="../dist/css/suneditor.min.css" rel="stylesheet" type="text/css">
<!-- sample css -->
<link rel="stylesheet" href="./css/bootstrap.css" media="all">
<link rel="stylesheet" href="./css/sample.css" media="all">
<script src="js/angular.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var comment = $.trim($(".tabcontent").val());
// Show alert dialog if value is not blank
alert(comment);
});
});
</script>
<style>
body{
background:#FAFAFA !important;
}
.tab {
overflow: hidden;
color: #f4b124;
font-weight: bold;
border-bottom: 2px solid #f4b124;
border-radius: 2px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: transparent;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 35px;
transition: 0.3s;
font-size: 16px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
margin: 0;
}
/* Change background color of buttons on hover */
.tab button:hover {
color: #f5f5f5;
}
/* Create an active/current tablink class */
.tab button.active {
color: #fff;
background-color: #f4b124;
}
/* Style the tab content */
.tabcontent {
display: none;
}
/* inline editor */
.inline-margin {
margin-top: 10px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="content" style="max-width: 1265px;">
<!-- Tab links -->
<!-- Tab content -->
<div id="classic" class="tabcontent" style="display: block;">
<div class="inline-margin"></div>
<textarea id="editor_classic" style="display:none;" ng-model="editor_classic">
</textarea><br>
{{"Content= " +editor_classic}}
<button >Submit</button>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="../dist/suneditor.min.js"></script>
<script>
SUNEDITOR.create('editor_classic', {
display: 'block',
width: '100%',
height: 'auto',
popupDisplay: 'full',
charCounter: true,
buttonList: [
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
['fontColor', 'hiliteColor'],
['outdent', 'indent'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print']
]
});
/*
SUNEDITOR.create('editor_balloon', {
mode: 'balloon',
display: 'block',
width: '100%',
height: 'auto',
popupDisplay: 'full',
buttonList: [
['fontSize', 'fontColor', 'bold', 'align', 'horizontalRule', 'table']
]
});*/
/*SUNEDITOR.create('editor_inline1', {
mode: 'inline',
display: 'block',
width: '100%',
height: '162',
popupDisplay: 'full',
buttonList: [
['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript']
]
});*/
/* SUNEDITOR.create('editor_inline2', {
mode: 'inline',
display: 'block',
width: '100%',
height: '204',
popupDisplay: 'full',
buttonList: [
['bold', 'underline', 'align', 'horizontalRule', 'list', 'table']
]
});*/
/* SUNEDITOR.create('editor_inline3', {
mode: 'inline',
display: 'block',
width: '100%',
height: 'auto',
popupDisplay: 'full',
buttonList: [
['link', 'image', 'video']
]
});
*/
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$scope.insertData = function () {
alert($scope.editor_classic);
console.log($scope.editor_classic);
console.log(openTab(evt, tabName));
/*$http
.post("view.php", {
'datavalues':$scope.datavalues
})
.success(function (data) {
alert(data);
/*$scope.refcategory=null;
$scope.name=null;
$scope.contact=null;
$scope.refby=null;
$scope.status=null;
$scope.plan=null;
$scope.altercontact=null;
$scope.address=null;
$scope.city=null;
$scope.state=null;
$scope.zip=null;
$scope.email=null;
$scope.view();
});*/
};
});
</script>
You can use the
getContentsmethod :