Как получить содержимое SunEditor (Richtextbox) внутри переменной Angular JS - PullRequest
Новая
       33

Как получить содержимое SunEditor (Richtextbox) внутри переменной Angular JS

1 голос
/ 10 октября 2019

Я использую SunEditor вместе с AngularJS, я хочу получить содержимое поля richtext и передать его в Angular JS, я пробовал ng-модель, но, похоже, она не работает. Есть ли какое-либо решение для получения всего содержимого html, написанного внутри расширенного текстового поля SunEditor? Я хочу получить текст, а также содержание HTML. 

       <!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>

Ответы [ 2 ]

2 голосов
/ 10 октября 2019

Вы можете использовать метод getContents.

var editor = SUNEDITOR.create ('editor_classic', {...})

console.log ('contents', editor.getContents())

0 голосов
/ 11 октября 2019

Я получил решение всего, что требуется, чтобы узнать класс / идентификатор div, в котором хранится содержимое, в моем случае, я изменил редактор и начал использовать другой форматированный текстовый редактор, хотя значения сохранялись вкласс с именем ".richText-editor". 

  $scope.get_data=function(){
                    var htmlString = JSON.stringify($('.richText-editor').html());
                    alert(htmlString);

                }

То же самое можно использовать с помощью Jquery 

 var htmlString = $('.richText-editor').html();

                    alert(JSON.stringify(htmlString));
                    console.log(JSON.stringify(htmlString));
...