[英]Creating a custom popup with Tinymce
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 dummyimg
which adds a predefined image into the tinymce container. 我添加了一个名为
dummyimg
的自定义按钮,它将预定义的图像添加到tinymce容器中。 My requirement is, i need a pop window like the one shown below which enables me to add only a image title
using the custom button. 我的要求是,我需要一个如下所示的弹出窗口,这使我能够使用自定义按钮仅添加图像
title
。
Thanks in advance. 提前致谢。
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.setContent
line in the onsubmit
to suit your own needs, as well as setting the correct toolbar
and plugins
settings. 显然,您需要编辑
onsubmit
的ed.selection.setContent
行以满足您自己的需要,以及设置正确的toolbar
和plugins
设置。
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)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.