Kendo UI エディターを使用すると、ユーザーは「画像を挿入」ボタンをクリックすると、画像ブラウザーがポップアップします。
ユーザーがエディタの外部で div をクリックしたときに imagebrowser を開きたいと思います。これどうやってするの?出来ますか?
年齢を検索してみましたが、答えが見つからないようです。
Kendo UI エディターを使用すると、ユーザーは「画像を挿入」ボタンをクリックすると、画像ブラウザーがポップアップします。
ユーザーがエディタの外部で div をクリックしたときに imagebrowser を開きたいと思います。これどうやってするの?出来ますか?
年齢を検索してみましたが、答えが見つからないようです。
この投稿を更新するために戻ってくるのを忘れていましたが、最終的に剣道エディターを使用してすべてを非表示にしました. これが私がやったことです。うまくいけば、これはいつか他の誰かに役立ちます:
.k-editable-area
{
display: none;
}
.k-editor
{
width: 4% !important;
height: 28px !important;
border: none !important;
background-image: none;
display: none;
margin-left: 10px;
}
.k-window
{
display: none;
}
Javascript:
$(document).ready(function () {
$("#imgBrowser").kendoEditor({
tools: [
"insertImage"
],
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/ImageBrowser/Read",
destroy: {
url: "/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/ImageBrowser/Thumbnail",
uploadUrl: "/ImageBrowser/Upload",
imageUrl: "/ImageBrowser/Image?path={0}"
},
change: function () {
//this.value(); //Selected image URL
},
select: function () {
}
}, execute: function (e) {
},
change: function () {
},
select: function () {
//this.value(); //Selected image URL but each selection is appended... ie:
<img /> <img /> <img /> ... you need to replace all except the last one.
SetSelectedImage(this.value());
}
});
});
次に、クリックすると画像ブラウザが起動するリンクを追加しました。
<a id="imgBrowser"></a><a id="addImage" style="display: inline; cursor: pointer;
float: left; font-weight: bold">+ Add image</a>
そして最後に、トリガーを行うための JavaScript を追加しました。
$("#addImage").click(function () {
$(".k-tool-icon").trigger('click');
});
これをチェックしてください。テキスト ボックスのフォーカスで、以下の jQuery スクリプトを呼び出します。
$('#editor').parent().parent().parent().parent().parent().parent().find('.k-insertImage').click();
このリンクで確認できます:kendo editor . ブラウザ コンソールからこのスクリプトを呼び出すだけです。