当我在 tinymce 中添加图像时,这是我得到的默认 html 源代码:
<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p>
我该如何更改?类似于:
<p><img class="img-responsive img-post" data-original="/Images/uploads/img.png" src="/Images/loading.gif" alt="" /></p>
我有原始数据作为 src 而 src 是加载图标,它需要像这样因为我对图像进行了延迟加载。
我知道您可以使用以下方式扩展有效元素:
extend_valid_elements: "data-original"
但我如何更改默认 html 源代码的结构?有没有选择ok图片插入回调之类的东西??
更新:
这是我的tinymce启动代码:
/******************************tinyMce*******************************/
function tinyMce() {
tinymce.init({
theme: "modern",
selector: "#mceEditor",
height: 500,
extend_valid_elements: "data-original",
relative_urls: true,
convert_urls: false,
image_advtab: true,
image_title: false,
image_description: false,
image_dimensions: false,
image_class_list: [
{ title: "Responsive", value: "lazy img-responsive img-post" }
],
image_list: function (success) {
$.ajax({
url: "/Image/List",
type: "GET",
dataType: "json",
success: function (data) {
success(data);
}
});
},
// enable automatic uploads of images represented by blob or data URIs
automatic_uploads: true,
// URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
images_upload_url: "/Image/Upload",
// here we add custom filepicker only to Image dialog
file_picker_types: "image",
// and here's our custom image picker
file_picker_callback: function (cb, value, meta) {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
// Note: In modern browsers input[type="file"] is functional without
// even adding it to the DOM, but that might not be the case in some older
// or quirky browsers like IE, so you might want to add it to the DOM
// just in case, and visually hide it. And do not forget do remove it
// once you do not need it anymore.
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
// Note: Now we need to register the blob in TinyMCEs image blob
// registry. In the next release this part hopefully won't be
// necessary, as we are looking to handle it internally.
var id = "blobid" + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), { title: file.name });
};
};
input.click();
}
});
}
我现在正在考虑另一种方式,如果我可以将tinymce中的默认src属性替换为data-original,那将是完美的,但是在tinymce中,如果我使用data-original,它不会显示图片,它只是显示空白。有没有办法在添加图像时告诉 tinymce,将 data-original 代替 src 并从 data-original 代替 src 读取?
因此:
<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p>
在没有 src 的情况下:
<p><img class="img-responsive img-post" data-original="/Images/uploads/img.png" alt="" /></p>
最佳答案
这是一种检测图像何时插入编辑器的方法。
JS
var newSrc = "/Images/loading.gif";
tinymce.init({
selector: 'textarea',
plugins: "image",
toolbar: "image",
height: 350,
setup: function(editor){
editor.on('NodeChange', function (e) {
if(e.element.tagName === "IMG"){
e.element.setAttribute("data-original", e.element.currentSrc);
e.element.setAttribute("src", newSrc);
}
});
}
});
您可以通过监听 NodeChange
事件来访问该元素。然后检查 tagName
是 IMG
类型。
然后我们就正常设置我们的属性。
检查这个Demo
关于jquery - 如何更改在 Tinymce 中添加图像的默认 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45728568/