Javascript 无法在ASP.Net mvc中使用TinyMCE渲染图像
我有一个类似word press的网站,其中嵌入了tinyMCE编辑器,用户可以在网站上添加文本、图像。但问题是,当有人试图通过tinyMCE“upload image”按钮上载图像时,图像会加载到tinyMCE编辑器,但当用户保存配置时,现在当用户访问实际网站时,图像会被破坏Javascript 无法在ASP.Net mvc中使用TinyMCE渲染图像,javascript,jquery,asp.net-mvc,browser,tinymce,Javascript,Jquery,Asp.net Mvc,Browser,Tinymce,我有一个类似word press的网站,其中嵌入了tinyMCE编辑器,用户可以在网站上添加文本、图像。但问题是,当有人试图通过tinyMCE“upload image”按钮上载图像时,图像会加载到tinyMCE编辑器,但当用户保存配置时,现在当用户访问实际网站时,图像会被破坏 Step 1: Add image to TinyMCE Editor (parent website) 2. Save the configurations 3. Go to the actua
Step 1: Add image to TinyMCE Editor (parent website)
2. Save the configurations
3. Go to the actual web site (created one) and see the change
奇怪的是,如果在IE、Chrome和Mozilla中运行父(word press)网站,使用不同的图像重复上述3个过程10次,然后突然在(创建的网站)中在Mozilla中正确渲染2-3次图像,在IE图像中正确渲染2-3次,而在Chrome中却从未正确渲染。所以基本上我试着在所有三种浏览器中运行父网站(word press),看到了(创建的网站)的行为,所有三种浏览器都显示出不稳定的行为
Chrome错误:
此外,当我检查页面(创建的网站)的图像元素时,src
格式不断变化
有时它是base64:src=“data:image/png;base64,iVBORw….
有时是
有时它是
--->(无HTTP)
我正在使用tinyMCE
我不知道该放什么代码段,请指导我。如果任何代码段有助于发现问题,请让我知道。我在这里完全迷路了。如果有帮助,我可以放JS代码或cshtml代码。我希望我知道一个更好的问这个问题的方法(
编辑:
因此,这次我在chrome中添加了两个图像。由于(创建的网站)中的异常行为,一个图像被正确渲染,另一个图像被破坏。因此,出于好奇,我只是在Mozilla中打开了相同的(创建的网站),但我甚至没有看到一个图像。因此,我检查了空元素,至少找到了两个img标记(即使它们在UI上都不可见)但我只能找到一个img标签。首先,Chrome应该显示两个图像。但它只显示了一个。现在,至少我应该在Mozilla中看到相同的行为,但它在UI上没有显示任何图像,甚至在检查时,至少应该有两个占位符,但我只找到了一个占位符。我已经清除了缓存和所有内容以及浏览历史记录。下面是截图
镀铬屏幕截图
带有两个img标签的镀铬检查元件:
Mozilla屏幕截图,只有一个img
标签
空Mozilla UI
破损的Chrome用户界面
function InitTinyForSpecificElement(elementName) {
tinymce.init({
selector: "#" + elementName,
theme: "modern",
plugins: [
"autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"paste textcolor colorpicker textpattern table fullscreen imagetools"
],
toolbar1: "insertfile undo redo | fontselect | bold italic underline strikethrough | subscript superscript | forecolor backcolor | link unlink",
toolbar2: 'preview fullscreen code | myInsertImage image | table | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent',
toolbar_items_size: 'small',
image_advtab: true,
paste_data_images: true,
setup: function (ed) {
ed.addButton('myInsertImage', {
title: 'Insert Image',
image: '../../Content/Images/insert-image-icon.png',
onclick: function () {
tinyMceElementId = elementName;
$('#uploadImageIntoTinyMce').trigger('click');
}
});