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

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>

此脚本需要带有 class 分机号的按钮。在htmlbody，需要做这个按钮

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

在header中...我们需要有需要的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"
});

所以如您所见，选择器是文本区域。

在 html body 中，放置此文本区域。

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

记下id="t1".

让我们现在来设置文本区域的内容

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

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

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

在这个例子中，我们使用一个按钮来完成我们的点击任务。

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

请注意，这并非 100% 完美或漂亮。这是一个教育示例，用于说明如何完成此操作的概念。 ajax 加载的内容将是显而易见的，隐藏它或做任何你想做的事情都是你的工作 - 让它变得漂亮。

顺便说一句，对我来说，这个示例在 Thymeleaf 中有效。

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

How to load HTML file from server into Tinymce editor

javascript

jquery

tinymce

thymeleaf