TinyMCE编辑器

msly

Download tinymce 5.1.6 source

dev: https://www. tiny.cloud/get-tiny/sel f-hosted/

setContent to a TinyMCE text editor

https:// dyclassroom.com/tinymce /how-to-set-data-to-tinymce-text-editor

富文本编辑器tinymce获取文本内容和设置文本内容

1、如果当前页面只有一个编辑器：
获取内容：tinyMCE.activeEditor.getContent()
设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)
2、如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）：
获取内容：tinyMCE.editors[0].getContent()
设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)
3、获取不带HTML标记的纯文本内容：
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
取到的 text 即为纯文本内容。
example
 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 4 <head>
 5 <script type="text/javascript" src="tinymce.min.js"></script>
 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 7 <script> 
 8     tinymce.init({
 9         selector:"h1.editable#elm2",       //elm2为ID                 可将selector值理解为css中class、ID等，以此使用tinymce中样式（比如编辑框内文本显示样式、工具栏样式）--个人理解，不保证正确
10         inline:true,                       //为true时，编辑工具栏隐藏
11         toolbar:"undo redo",
12         menubar: false
13     });
14     tinymce.init({
15         selector:'textarea#elm1',          //<textarea>中为编辑区域
16         theme: "modern",                  //主题
17         language: "zh_cn",                //语言 ，可自行下载中文
19     height: 300,
20     plugins: [                             //插件，可自行根据现实内容删除
21          "advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
22          "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime  nonbreaking",
23          "save table contextmenu directionality emoticons paste textcolor"
24    ],
25    content_css: "css/content.css",      //引用的外部CSS样式，可删除
26    toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      | print preview fullpage | forecolor backcolor",                          //工具栏，可根据需求删除
27    style_formats: [                        //初始时提供的默认格式
28         {title: 'Bold text', inline: 'b'},
29         {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
30         {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
31         {title: 'Example 1', inline: 'span', classes: 'example1'},
32         {title: 'Example 2', inline: 'span', classes: 'example2'},
33         {title: 'Table styles'},
34         {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
35     ]
36  }); 
37 </script>
38 </head>
39 <body>
40     <b>Title</b>
41     <br>
42     <div class="activityshow_box" style= "margin-top:40%;width: 100%;;margin-let:15%;margin-right:15%;padding:0;margin:2px 0;">
43     </div>
45     <h1 class="editable" id="elm2">这是标题，编辑工具栏隐藏</h1>
46     <textarea id="elm1">文本内容哈</textarea>                 <!-- 编辑框 elm1为此部件ID-->
47     <input type="button" onclick= "doy()"/> 
49 </body>
50 <script>
51     function doy(){
52         var tmp= tinymce.get('elm1').getContent();      //此函数可获得编辑框内容   
53         var tmp2=tinymce.get('elm2').getContent();
54         $('textarea').hide()
55         $('.activityshow_box').show();
56         $('.activityshow_box').append(tmp);
57         tinymce.activeEditor.setContent("<p style='color:red;'>这只是个测试</p>");     //设置编辑框内容   Jquery.text('内容')方法也可以达到设置编辑框内容目的
58         alert(tmp);
59         alert(tmp2);
60     }
61 </script>
62 </html>

如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中

如果你想用TinyMCE来修改你之前写的文章那么你需要将源代码放到TinyMCE中，如果服务器把HTML 源码发给我们可是我们应该怎样调用？

方法为使用 tinymce.activeEditor.setContent()这个函数

具体用法为：

tinymce.activeEditor.setContent()   //设置TinyMCE编辑器里的内容源代码
 tinymce.activeEditor.getContent()   //获取TinyMCE编辑器里的内容源代

可是我们发现直接放到HTML文件里执行无法获取到这个函数，这是因为TinyMCE这个时候还没有初始化完成，也就是说我们还无法调取这个函数，必须要等到TinyMCE彻底初始化完成后才能调用，所以我们这里有两种写法获取初始化完成的消息。

//第一种：
//使用setup
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
            setup: function (editor) {
                editor.on('init', function (e) {
                    console.log('初始化完成');
                    tinymce.activeEditor.setContent(data);
________________________________________________________________________________________
//第二种
//使用.then回调函数
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
        }).then(resolve => {
           tinymce.activeEditor.setContent(data);
————————————————

tinymce5设置光标到内容末尾

通常我们设置内容后，光标会跑到最前面

editor.setContent(content)

复制后，通过下面代码即可把光标放到内容最后面

editor.selection.select(editor.getBody(),true);
editor.selection.collapse(false);

The Table of Contents plugin provides the following JavaScript commands.

The Table of Contents plugin provides the following JavaScript commands.
Command	Description