[英]Creating a custom popup with Tinymce
以下是我的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();
}
});
我添加了一個名為dummyimg
的自定義按鈕,它將預定義的圖像添加到tinymce容器中。 我的要求是,我需要一個如下所示的彈出窗口,這使我能夠使用自定義按鈕僅添加圖像title
。
提前致謝。
這個例子應該讓你開始:
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>');
}
});
}
});
}
});
顯然,您需要編輯onsubmit
的ed.selection.setContent
行以滿足您自己的需要,以及設置正確的toolbar
和plugins
設置。
雖然這個問題很老..我正在回答你的另一個問題(我還不能發表評論)。
“如何獲取源文本框的內容?”
onSubmit: function(e) {
console.log(e.data.source)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.