如何使用 javascript/jquery 和 php 从媒体编辑器保存数据

Question

我正在开发一个博客，我想添加媒体编辑器来获取我的内容并保存。我一直在互联网上搜索，并尝试使用 JavaScript 自己尝试，但它根本没有给我任何东西。

超文本标记语言

<div class="editable" id="articles" data-field-id="content">
<button id="publish_article"></button>

JS

var editor = new MediumEditor('.editable',{
                                placeholder:{
                                  text:'Type Your Article',
                                  hideOnClick:true
                                })
$('#publish_article').click(function(){
      $('.editable').bind('input propertychange, function(){
        var x=$('#article'+$(this).attr("data-field-id")).val($(this).html());});});

Answer 1

假设您已经按照上面示例中的相同方式实例化了编辑器：

var editor = new MediumEditor('.editable', { ... });

如果您只是想获取编辑器的内容，则可以使用辅助方法（此处的editor.getContent()文档），它将返回编辑器的 html 内容。这将为您提供编辑器元素的 。.innerHTML

var x = editor.getContent();  // x is the innerHTML of the editor

如果您希望收到有关编辑器的任何更改（键入、粘贴、格式更改等）的通知，您可以订阅自editableInput定义事件并在发生这些更改时收到通知：

editor.subscribe('editableInput', function (eventObj, editable) {
    // You can get the content of the editor at this point multiple ways
    var x = editable.innerHTML; // editable is the editor <div> element that was changed
    var y = editor.getContent(); // getContent() returns the content of the editor as well
    x === y; // TRUE
});

如果您希望在单击发布按钮时获取编辑器的内容，则只需保留编辑器的引用即可：

$('#publish_article').click(function () {
    var x = editor.getContent();
    // The publish button has been clicked and you now have the content of the editor in x
});

我不确定您在访问这些内容后希望如何处理该内容，但希望上面的示例能够帮助您将所需的功能拼凑在一起。