html - Tinymce 文本区域无法正确显示

Question

文本区域显示 html 标签和 WYSIWIG 编辑器。我如何不显示带有 html 标签的文本区域而只显示编辑器。

我加载了以下 js 和 css 链接。

Scripts loaded

<h1>Incident Notes</h1>
<p></p>
<div class="form-group">
    <input hidden="hidden" name="id" th:value="${incident.id}" /> <label
        for="location">Incident Reference No: </label> <span
        th:text="${incidentRefNo}" />
</div>
<form action="@{/incidentNotes/update}" method="post">
    <input class="form-control" type="text" name="tempNotes"
        id="tempNotes" th:value="${tempNotes}" readonly="readonly"
        hidden="hidden" />
    <textarea id="myTextarea">

  </textarea>


    <hr />

    <div class="form-group ">
        <a class="btn btn-info btn-lg btn-block login-button"
            th:href="@{/incidentDetail?id=}+${incident.id}">Back</a>
    </div>
</form>

<script type="text/javascript">
    $(document)
            .ready(
                    function() {

                        tinymce
                                .init({
                                    selector : '#myTextarea',
                                    skin : "oxide-dark",
                                    height : 800,
                                    plugins : [
                                            "advlist autolink lists link charmap print preview anchor",
                                            "searchreplace visualblocks",
                                            "insertdatetime table contextmenu paste save" ],
                                    toolbar : " save | print | insertfile undo redo |styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
                                    init_instance_callback : function(
                                            editor) {
                                        var tempNotes = $('#tempNotes')
                                                .val();
                                        console.log(tempNotes);
                                        tinymce.get('myTextarea')
                                                .setContent(tempNotes);
                                    },
                                    save_onsavecallback : function() {
                                        var content = tinymce.activeEditor
                                                .getContent();
                                        console.log(content);

                                        var url_string = window.location.href;
                                        var url = new URL(url_string);
                                        var incidentId = url.searchParams
                                                .get("id");
                                        console.log("Incident ID: "
                                                + incidentId);

                                        var oldURL = window.location.href
                                        var index = 0;
                                        var newURL = oldURL;
                                        index = oldURL.indexOf('?');
                                        if (index == -1) {
                                            index = oldURL.indexOf('#');
                                        }
                                        if (index != -1) {
                                            newURL = oldURL.substring(0,
                                                    index);
                                        }

                                        var path = newURL + '/update';

                                        $
                                                .ajax({
                                                    type : 'post',
                                                    cache : false,
                                                    url : path,
                                                    data : {
                                                        content : content,
                                                        incidentId : incidentId
                                                    },
                                                    success : function() {
                                                        tinymce.activeEditor.windowManager
                                                                .alert("This page has been successfully saved");
                                                    }
                                                });
                                    }
                                });
                    });
</script>

显示如下。文本区域显示加载的 html。如何加载编辑器？

Result

请帮忙

Answer 1

您似乎正在设置 TinyMCE 编辑器的值，并且 <input />紧接在它之前的值 tempNotes .您确定此输入字段已正确隐藏吗？

   <input class="form-control" type="text" name="tempNotes"
        id="tempNotes" th:value="${tempNotes}" readonly="readonly"
        hidden="hidden" />

根据 MDN ，隐藏输入的语法是:

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

如果出于测试目的删除该输入，您是否仍然看到 HTML 字符串？