在选定的文本上应用预格式

Question

我正在研究tinymce并面临一个问题。每当我想将任何格式应用于所选文本时，例如pre，block等，它确实适用于所有行，而不仅仅是所选文本。

在上面的示例中，我将预格式化的文本应用于“演示是为了显示集成”，但是，它将应用于整行。我可以修改此默认行为吗？

tinymce.init({
 selector: 'textarea',
 height: 500,
 menubar: false,
 plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  |    alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
 content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css']
 });

https://codepen.io/tinymce/pen/YydQrY

Answer 1

用于执行此操作的元素旨在更改块元素的格式。当您选择其中任何一个选项时，它会更改周围的块元素 - 这就是它的工作原理。

您可以编写自己的自定义工具栏按钮来执行所需操作。请参阅此TinyMCE小提琴，获取示例：http://fiddle.tinymce.com/1igaab/1

关键是编辑器设置中的这个功能：

Prop

请注意，当您执行此操作时，TinyMCE知道PRE是一个块标记，并将清理周围的HTML，因此在PRE部分之前和之后仍然有有效的块。

Answer 2

这些代码行将替换现有的选定内容，并附加<pre>标记与所选文字：

editor.addButton('addpretag', { text: 'Add PRE tag',   onclick: function () {
    var text = tinyMCE.activeEditor.selection.getContent();
    tinyMCE.execCommand('mceReplaceContent', false, "<pre>" + text + "</pre>");
    }
});