我有一个文件选择器,想要加载选择到tinyMCE编辑器textarea中的HTML和XML文件。
我有以下代码,但无效。
<script type="text/javascript">
tinymce.init({
selector: 'textarea', // change this value according to your HTML
height: 400,
browser_spellcheck: true,
plugins: "code,table,textcolor,save,preview,searchreplace,advlist,textcolor,hr,fullscreen",
toolbar: [
'save | undo redo | styleselect | fontsizeselect | bold strikethrough italic forecolor backcolor | link image | alignleft aligncenter alignright | numlist bullist | indent outdent | table | code | fullscreen'
],
file_browser_callback: function(field_name, url, type, win) {
win.document.getElementById(field_name).value = 'editor';
console.log(win.document.getElementById(field_name).value);
},
save_onsavecallback: function () {
var doc = tinymce.get('content').getDoc();
console.log('Content: ', doc);
}
});
</script>
textarea看起来像这样:
<textarea class="form-control" id="editor"></textarea>
准确地说,这是发生的事情。我看到了一个文件选择器但是当我点击打开文档时,所选文件没有输入到textarea中。
下面的图片。
答案 0 :(得分:1)
根据您对该案例的评论的最后回复,您不需要TinyMCE文件选择器功能 - 您需要构建一个允许选择文件,上传文件,然后发送文件的HTML表示的UI返回浏览器,以便您可以通过setContent()
API将HTML插入编辑器。
我会使用自定义工具栏按钮打开一个“对话框”,它实际上是一个带有文件选择UI的单独HTML页面。选择文件后,您可以将其发送到您的服务器。服务器可以根据需要打开/处理文件,并将HTML结果发送回“对话框”。然后,“对话框”可以使用TinyMCE setContent()
API将数据加载到编辑器中。
简单的文件选择器无法完成您所需的一切。