Question

我需要能够获取HTML文件并加载到TinyMce中的可编辑文本区域。 Tinymce网站上的文档没有提供明确的说明。

我将我的代码放在Spring MVC的Thymeleaf模板中。

Answer 1

首先，我们需要使用ajax和jquery加载文件。

<script>
$(document).ready(function(){
    $("button.ext").click(function(){
        $.ajax({url: "hello", success: function(result){
            $("#div1").html(result);
        }});
    });
});
</script>

此脚本需要一个类为ext的按钮。在html体内，需要制作这个按钮

<button class="ext">Get External Content</button>

在...中的标题中，我们需要有必要的tinymce脚本

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

所以选择器是textarea，如你所见。

在html正文中，把这个textarea。

<textarea id="t1" style="width: 300px; height: 100px;"></textarea>

记下id =“t1”。

让我们设置一个现在将设置textarea的内容

    <script type="text/javascript">
function updateEditor(taClass) {
  var table = $("#div1").html();
  tinyMCE.get(taClass).setContent(table);
}
</script>

所以在上面的脚本中首先有一个能够传递参数（taClass）的函数。在我们的例子中，这将是t1（对于id =“t1”）。

接下来，我们将变量表分配给我们在第一个ajax脚本中设置的id＃div1。

在这个例子中，我们使用一个按钮完成我们的工作onClick。

<button id="div1button" onclick="updateEditor('t1'); return false;">Set content to tinyMCE textarea 1</button>

请注意，这不是100％完美或漂亮。这是一个教育的例子来说明如何做到这一点的概念。由ajax加载的内容将是显而易见的，隐藏它或做任何你想做的事情都是你的工作 - 让它漂亮。

对我来说，顺便提一下，这个例子在Thymeleaf中有效。

如何将HTML文件从服务器加载到Tinymce编辑器中

1 个答案: