CKeditor 5 文本区域不更新

Question

所以我有一个 CKeditor 5 文本区域，当我单击提交按钮时，它会运行获取文本区域，并且为了这个示例，将其作为 alter 触发。然而，问题是它在加载时触发了编辑器中的内容，而不是我所做的更改。

我假设我需要告诉文本编辑器在收集变量之前进行刷新或其他操作？

有没有人知道我如何解决这个问题，这是我的代码

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>OpsPal | Tasks</title>
    <link rel="icon" type="image/x-icon" href="../images/favicon.ico?refresh=<?php echo $refresh ?>"/>
    <link href="../assets<?php echo $L ?>/css/loader.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
    <script src="../assets<?php echo $L ?>/js/loader.js?refresh=<?php echo $refresh ?>"></script>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link href="../bootstrap<?php echo $L ?>/css/bootstrap.min.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
    <link href="../assets<?php echo $L ?>/css/main.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
    <link href="../assets<?php echo $L ?>/css/structure.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
    <link href="../plugins<?php echo $L ?>/perfect-scrollbar/perfect-scrollbar.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../plugins<?php echo $L ?>/bootstrap-select/bootstrap-select.min.css?refresh=<?php echo $refresh ?>">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css?refresh=<?php echo $refresh ?>">
    <link rel="stylesheet" href="../assets/css/formval/screen.css?refresh=<?php echo $refresh ?>">
    <!--JAVASCRIPT -->
    <script src="../assets/js/libs/jquery-3.1.1.min.js?refresh=<?php echo $refresh ?>"></script>
    </head>
    
    <body>

         <!--  BEGIN CONTENT PART  -->
        <div id="content" class="main-content">
            <div class="layout-px-spacing">
        <div class="container-responsive">
                <div class="row layout-top-spacing">
                        
                <div class="col-xl-8 col-lg-10 col-md-10 col-sm-12 layout-spacing">
               <div class="widget-content widget-content-area br-6">  
              
                 <form id="newtask" method="post" autocomplete="off" >


                   <label for="formGroupExampleInput">Note</label>
                    <div class="centered" >
                    <div class="row row-editor">
                    <div class="editor-container" style="width: 100%; margin-left: 10px; margin-right: 10px;">
                    <textarea required class="editor form-control" name="note" id="note" type="text">Org Text</textarea> 
                    </div>
                    </div></div>

                    <input name="submit" type="submit"  value="submit" id="submit" class="btn btn-primary">
            </form>
            
                    
        </div></div></div></div></div>
           <?php include_once("../footer.php"); ?> 
        </div></div></div>
    <!-- END MAIN CONTAINER -->

    <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
  
    <script src="../bootstrap/js/popper.min.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../bootstrap/js/bootstrap.min.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../plugins/perfect-scrollbar/perfect-scrollbar.min.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../assets/js/app.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../plugins/bootstrap-select/bootstrap-select.min.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../scripts/jquery.validate.js?refresh=<?php echo $refresh ?>"></script>
    
    <script>
    ///this validates the formon the submit handler if successful it switches the button over//
    $('#newpro').validate({
    submitHandler: function(){
      $("#save").hide();
      $("#savedis").show();
    $(form).ajaxSubmit();
    }
        });  
    </script>
    
    <script>
        
    $(document).ready(function() {
    App.init();
    
     });
    </script>
    <script src="../assets/js/custom.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../plugins/ckeditor/build/ckeditor.js?refresh=<?php echo $refresh ?>"></script>
    <script src="../plugins/ckeditor/ckfinder/ckfinder.js?refresh=<?php echo $refresh ?>"></script>
    <?php //////adds a dark theme to ckeditor//// 
    if($theme=='D'){
    echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/dark.css?refresh=$refresh)' type='text/css'>";
    }
    else{
    echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/light.css?refresh=$refresh)' type='text/css'>";   
    }
    ?>
    
    <script>

            
            const watchdog = new CKSource.EditorWatchdog();
            
            window.watchdog = watchdog;
            
            watchdog.setCreator( ( element, config ) => {
                return CKSource.Editor
                    .create( element, config )
                    .then( editor => {
                        return editor;
                    } )
            } );
            
            watchdog.setDestructor( editor => {

                return editor.destroy();
            } );
            
            watchdog.on( 'error', handleError );
            
            watchdog
                .create( document.querySelector( '.editor' ), {
                fontSize: {
            options: [
               'default',
                8,
                10,
                12,
                14,
                16,
                18,
                20
            ]
        },

                ckfinder: {
            uploadUrl: '../plugins/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
        },
                
                mediaEmbed: {
        previewsInData: true
    },
                    
                toolbar: {
                    items: [
                        'undo',
                        'bold',
                        'italic',
                        'underline',
                        'fontSize',
                        'alignment',
                        'bulletedList',
                        'numberedList',
                        'horizontalLine',
                        '|',
                        'link',
                        'CKFinder',
                        'mediaEmbed',
                        'insertTable',
                        'imageInsert',
                        'findAndReplace',
                        'highlight',
                        'heading',
                        //'sourceEditing',
                        
                    ],
                    
                    
                    
                },
                language: 'en-gb',
                image: {
                    toolbar: [
                        'imageTextAlternative',
                        'imageStyle:inline',
                        'imageStyle:block',
                    
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells',
                        'tableCellProperties',
                        'tableProperties'
                    ]
                },
                    licenseKey: '',
                
                } )
                .catch( handleError );
            
            function handleError( error ) {
                console.error( 'Oops, something went wrong!' );
                console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
                console.warn( 'Build id: 8kp2t5e90ll2-hyf8iacvn125' );
                console.error( error );
            }
                
        </script>
    
        
    
    <script>
    
        
        
         $('#submit').on('click',function(){
            var note= $('#note').val();
             alert(note);
         })
        
        
         
        
    </script>
    
     


</body>
</html>

Answer 1

1，将按钮提交脚本移到第一个脚本标签本身。无需再定义 .

2，您的变量名为 watchdog，而不是 editor。所以在你移动按钮提交之后，它里面做：console.log(watchdog.getData());.

在这里，这个 fiddle 会有所帮助：JSFiddle 如果一开始提交，会输出'Old Content'，之后如果改文本再提交，会输出'New Content'。您可以在 Fiddle.

的控制台中看到输出

CKeditor 5 文本区域不更新

CKeditor 5 text area not updating

javascript

jquery

textarea

ckeditor