javascript Tinymce 添加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27791824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tinymce adding  
提问by sreginogemoh
I am tryng to override the default tinymce in peranhacms like suggested here Configure / override Piranha CMS html editor so as not to add  's to htmlI spend already about one hour trying to fix that problem. There is a lot of resources on that problem but cant get it work.
我正在尝试覆盖 peranhacms 中的默认 tinymce，就像这里建议的配置/覆盖 Piranha CMS html 编辑器，以免将 添加到 html我已经花了大约一个小时试图解决这个问题。有很多资源可以解决这个问题，但无法解决问题。
- https://wordpress.org/support/topic/correct-way-to-allow-nbsp-entity-in-tinymce
- tinyMCE adding p tags and nbsp automatically
- http://blog.room34.com/archives/5075
- TinyMCE is adding   instead of the space when using the word paste
- https://wordpress.org/support/topic/correct-way-to-allow-nbsp-entity-in-tinymce
- tinyMCE 自动添加 p 标签和 nbsp
- http://blog.room34.com/archives/5075
- TinyMCE 在使用单词 paste 时添加 而不是空格
Here is how my tinymce.init looks like.
这是我的 tinymce.init 的样子。
<script type="text/javascript" src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
mode: 'specific_textareas',
editor_selector: "editor",
apply_source_formatting: false,
cleanup_on_startup: false,
trim_span_elements: false,
cleanup: false,
convert_urls: false,
force_br_newlines: true,
force_p_newlines: false,
remove_linebreaks: false,
convert_newlines_to_brs: false,
forced_root_block: '',
inline_styles : true,
entity_encoding: 'raw',
verify_html: false,
//forced_root_block: false,
validate_children: false,
remove_redundant_brs: false,
fix_table_elements: false,
entities: '160,nbsp,38,amp,60,lt,62,gt',
plugins: [
"autoresize autolink code hr paste piranhaimage link"
],
width: "100%",
height: "340",
autoresize_min_height: 340,
@if (File.Exists(Server.MapPath("~/areas/manager/content/css/editor.css"))) {
<text>content_css: "@Url.Content("~/areas/manager/content/css/editor.css")",</text>
}
toolbar: "bold italic underline | bullist numlist hr | formatselect removeformat | cut copy paste | link piranhaimage | code",
paste_auto_cleanup_on_paste: false,
paste_postprocess: function (pl, o) {
// remove extra line breaks
o.node.innerHTML = o.node.innerHTML.replace(/ /ig, " ");
alert("a1");
},
cleanup_callback: 'my_cleanup_callback',
});
function my_cleanup_callback(type, value) {
alert("a2");
switch (type) {
case 'get_from_editor':
// Remove characters
value = value.replace(/ /ig, ' ');
alert("a3");
break;
case 'insert_to_editor':
case 'submit_content':
case 'get_from_editor_dom':
case 'insert_to_editor_dom':
case 'setup_content_dom':
case 'submit_content_dom':
default:
break;
}
return value;
}
</script>
here is the example of html I use to paste in to tinyice textarea
这是我用来粘贴到 tinyice textarea 的 html 示例
<div class="catelog-box">
<img src="images/dance.png" alt="dine">
<div class="cat-detail">
<h2>Dance</h2>
<p>Dis purus arcu etiam auctor risus aliquam mid turpis eu vel, nunc rhoncus lacus natoque ridiculus...</p>
</div>
</div>
And it is how it is looking in browser source:
这就是它在浏览器源代码中的样子：
I put alerts to check if paste_postprocessand my_cleanup_callbackactually firing, but they are not. And I am still have   in the html.
我发出警报以检查是否paste_postprocess并my_cleanup_callback实际触发，但它们没有。而且我仍然在 html 中有 。
I was trying to set cleanup: trueand paste_auto_cleanup_on_paste: truebut it is didnt help to fire paste_postprocessand my_cleanup_callback
我试图设置cleanup: true，paste_auto_cleanup_on_paste: true但它没有帮助开火paste_postprocess和my_cleanup_callback
How would you fix the   problem?
你将如何解决 问题？
回答by Dinesh Ramasamy
Just adding entity_encoding: 'raw'solved the problem.
只需添加即可entity_encoding: 'raw'解决问题。
回答by dev111
The following code clean me everything in the tinymce content
以下代码清除了 tinymce 内容中的所有内容
tinymce.init({
selector: "textarea",
invalid_elements :'strong,bold,b,em,br,span,div,p,img,a,table,td,th,tr,header,font,body,h,h1,h2,h3,h4,h5',
invalid_styles: 'color font-size text-decoration font-weight',
menubar: false,
toolbar:false,
statusbar:false,
forced_root_block : "",
cleanup: true,
remove_linebreaks: true,
convert_newlines_to_brs: false,
inline_styles : false,
entity_encoding: 'raw',
entities: '160,nbsp,38,amp,60,lt,62,gt',
});}
回答by H?kan Edling
TinyMCE is a monster of options and settings, but given the links you have provided andthat you've used the clean-up method from TinyMCE is adding   instead of the space when using the word paste, have you tried setting:
TinyMCE 是一个选项和设置的怪物，但鉴于您提供的链接，并且您已经使用TinyMCE的清理方法在使用单词 paste 时添加 而不是空格，您是否尝试过设置：
paste_auto_cleanup_on_paste: true
Since this is set in the example you're referencing. Apart from that guess, I have no idea why the event isn't firing.
由于这是在您引用的示例中设置的。除了那个猜测，我不知道为什么事件没有触发。
Best regards
最好的祝福
H?kan
看
回答by codegaze
I know this is old, but adding this CSS properties to your editor's element can solve the problem. This is not a tinyMCE issue, this is how the editable divs work.
我知道这是旧的，但是将此 CSS 属性添加到编辑器的元素可以解决问题。这不是 tinyMCE 问题，这就是可编辑 div 的工作方式。
#editor {
white-space: pre-wrap;
word-wrap: break-word;
}
Cheers
干杯
回答by Eleanor Zimmermann
I got around this by adding a zero-width-space ('​') for the defaultContent option.
the TinyMCE code appears to replace empty content with paragraph tags around a non-breaking spaces.
我通过'​'为 defaultContent 选项添加零宽度空间 ( ) 来解决这个问题。TinyMCE 代码似乎用围绕不间断空格的段落标记替换了空内容。
By adding in the zero width space, it appears empty in the UI, but, prevents this post-processing.
通过添加零宽度空间，它在 UI 中看起来是空的，但是，阻止了这种后处理。
For example:
例如：
let options = {
// [...]
defaultContent: '​'
// [...]
}
