一、项目用到了ckeditor插件,做完上传图片功能发现个问题,在将内容保存时文本img标签多了style样式属性,在PC端没有问题,但手机端显示异常,适配不了,经过多方面的研究,问题得到解决,晒出出解决办法,如下:
1、找到ckeditor插件路径下config.js文件
2、在里面加上如下配置:
CKEDITOR.on('instanceReady', function (ev) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor
var dtd = CKEDITOR.dtd;
for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
dataProcessor.writer.setRules(e,
{
indent: true,
breakBeforeOpen: true,
breakAfterOpen: false,
breakBeforeClose: !dtd[e]['#'],
breakAfterClose: true
});
}
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements:
{
$: function (element) {
// Output dimensions of images as width and height
if (element.name == 'img') {
var style = element.attributes.style;
delete element.attributes.style;
}
if (!element.attributes.style)
delete element.attributes.style;
return element;
}
},
attributes:
{
style: function (value, element) {
// Return #RGB for background and border colors
return convertRGBToHex(value);
}
}
});
});
3、祝贺你,问题彻底解决
分享到:
相关推荐
"readme.txt"文件通常包含更详尽的介绍,包括补丁的背景、目的、适用环境、注意事项,以及可能遇到的问题和解决方案。它可能会提醒用户,CKEditor的更新可能覆盖这些改动,因此在更新编辑器时需要再次应用此补丁,...
不过,WordPress提供了一个解决方案,允许你通过自定义CSS样式表来改变编辑器的视觉呈现,使其更接近前端的样式。 要实现这一目标,你可以遵循以下步骤: 1. **创建CSS样式表**: 首先,在你的主题根目录下创建一...
总的来说,BootstrapPlugin - wysihtml5 是一个优秀的富文本编辑器解决方案,它结合了Bootstrap的美观设计和wysihtml5的高效编辑功能,为开发者提供了一种简单而强大的工具,使得创建交互式、用户友好的内容编辑界面...
style.css是主样式表,通常用于全局样式设定,影响整个网站的外观。 2. \editor\:这可能是一个富文本编辑器的目录,用于用户在系统中创建和编辑内容。编辑器的实现可能包括了JavaScript库,如CKEditor或TinyMCE,...
"vue-html-editor" 是一个基于Vue.js的HTML编辑器组件,它提供了丰富的文本编辑功能,如字体样式调整、段落格式设置、列表、链接插入、图片上传等。这个组件通常通过`npm`或`yarn`安装到项目中,然后在Vue组件内导入...
如果你的项目需要长期维护,考虑使用更现代的解决方案可能是个好主意。 总之,通过本文档,你应该了解了如何在ASP.NET项目中使用FCKeditor创建一个在线编辑器的基本步骤。这只是一个基础的实现,你还可以根据需求...
同时,为了提高兼容性和性能,你可能还需要引入第三方库,如TinyMCE或CKEditor,它们提供了更完善的解决方案。 总之,创建一个WYSIWYG编辑器是一个综合性的任务,涉及到JavaScript的事件处理、DOM操作、以及对...
【ASP技术介绍】 ASP(Active Server Pages)是微软公司推出的一种...总结起来,这个ASP源码包是一个完整的网站解决方案,涵盖了网页设计、后端开发和用户体验等多个方面,对于学习和实践Web开发技术具有很大的帮助。
如果你无法找到,可以尝试以下解决方案: 1. **官方下载**:访问FREETEXTBOX的官方网站,查找最新版本的控件包,通常完整版会包含所有必需的文件。 2. **社区资源**:在开发者论坛或GitHub等开源社区搜索,其他...
7. **条件注释与浏览器嗅探**:在处理IE兼容性问题时,可能需要使用到条件注释(Conditional Comments)或者浏览器嗅探技术,以便针对IE提供特定的解决方案。 8. **polyfills**:对于不被某些浏览器支持的新特性,...
总的来说,要实现 `textarea` 内不同文本显示不同颜色,可以通过JavaScript动态创建和插入元素来达到目的,但这种方法并不是标准的HTML/CSS解决方案,且存在一些限制。在实际项目中,选择一个支持富文本编辑的组件...