javascript 使用 Tinymce 创建自定义弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18822409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a custom popup with Tinymce
提问by Chamara Keragala
Below is the code for my Tinymce textarea
下面是我的 Tinymce textarea 的代码
tinymce.init({
selector: "textarea",
height : 350,
plugins: [
"link image lists preview anchor"
],
toolbar: " image bold italic | formatselect | undo redo | cut copy paste | bullist numlist | undo redo | link unlink dummyimg | preview",
menubar: false,
toolbar_items_size: 'small',
setup : function(ed) {
// Add a custom button
ed.addButton('dummyimg', {
title : 'Add image',
image : 'resources/images/img.jpg',
onclick : function() {
if($('#imageupload').val()){
ed.focus();
ed.selection.setContent('<img src="<%=strWebhost%>/news_cms/resources/images/dummyimg.jpg" />');
} else{
alert("Please select an image.");
}
}
});
},
onchange_callback: function(editor) {
tinyMCE.triggerSave();
$("#" + editor.id).valid();
}
});
I have added a custom button called dummyimgwhich adds a predefined image into the tinymce container. My requirement is, i need a pop window like the one shown below which enables me to add only a image titleusing the custom button.
我添加了一个名为的自定义按钮dummyimg，它将预定义的图像添加到 tinymce 容器中。我的要求是，我需要一个如下所示的弹出窗口，它使我能够title使用自定义按钮仅添加一个图像。
Thanks in advance.
提前致谢。
回答by Ezra Free
this example should get your started:
这个例子应该让你开始：
tinymce.init({
selector:'textarea.editor',
menubar : false,
statusbar : false,
toolbar: "dummyimg | bold italic underline strikethrough | formatselect | fontsizeselect | bullist numlist | outdent indent blockquote | link image | cut copy paste | undo redo | code",
plugins : 'advlist autolink link image lists charmap print preview code',
setup : function(ed) {
ed.addButton('dummyimg', {
title : 'Edit Image',
image : 'img/example.gif',
onclick : function() {
ed.windowManager.open({
title: 'Edit image',
body: [
{type: 'textbox', name: 'source', label: 'Source'}
],
onsubmit: function(e) {
ed.focus();
ed.selection.setContent('<pre class="language-' + e.data.language + ' line-numbers"><code>' + ed.selection.getContent() + '</code></pre>');
}
});
}
});
}
});
Obviously you'd need to edit the ed.selection.setContentline in the onsubmitto suit your own needs, as well as setting the correct toolbarand pluginssettings.
显然，您需要编辑 中的ed.selection.setContent行onsubmit以满足您自己的需要，以及设置正确的toolbar和plugins设置。
回答by slimeygecko
While this question is old.. I am replying to your other question ( I can't comment yet).
虽然这个问题很老..我正在回答你的另一个问题（我还不能发表评论）。
"how to get the content of source textbox?"
“如何获取源文本框的内容？”
onSubmit: function(e) {
console.log(e.data.source)
}
