Tinymce - 创建自定义的javascript保存按钮

时间:2016-03-28 07:13:44

标签: javascript tinymce tinymce-4

所以我试图取代我的按钮'在下面的代码中使用另一个代码提示将内容保存到弹出框中的文件中。 mybutton是我想要使用的,但改变了插入该文本的功能"它是我的按钮!"到下面的代码中的函数。

<script>
tinymce.init({
  selector: 'textarea',
  toolbar: 'mybutton',
  setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function () {
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
      }
    });
  },
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});
</script>

我不确定将mybutton函数替换为下面的函数或者如何处理document.getElement行的正确方法。我可以以某种方式让mybutton作为单独的代码工作,还是必须在tinymce本身?真的不知道,任何建议都会有所帮助。

<script type="text/javascript">
function saveFileAs() {
    if (promptFilename = prompt("Save as ADD EXTENSION", "")) {
        var textBlob = new Blob([document.getElementById("textarea").value], {type:'text/plain'});
        var downloadLink = document.createElement("a");
        downloadLink.download = promptFilename;
        downloadLink.innerHTML = "Download File";
        downloadLink.href = window.URL.createObjectURL(textBlob);
        downloadLink.click();
    }
}

document.getElementById("mybutton").onclick = saveFileAs;
</script>

希望这是有道理的,让我知道是否还需要其他任何东西。

编辑:

下面的答案有所帮助,但它并没有保存输入文本区域的任何新数据。

1 个答案:

答案 0 :(得分:0)

要回答部分问题,您可以从TinyMCE init中的函数调用属于页面一部分的任何JavaScript。 init只是一个JavaScript对象,可以与页面上的其他JavaScript进行交互。假设页面上加载了saveFileAs()函数,您可以这样做:

tinymce.init({
  selector: 'textarea',
  toolbar: 'mybutton',
  setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function (editor) {
        saveFileAs(editor);
      }
    });
  }
});

您在saveFileAs()方法中尝试做什么?