如何将数据设置为TinyMCE文本编辑器
时间：2020-02-23 14:33:10 来源:igfitidea点击:
在本教程中，我们将学习将数据设置为TinyMCE文本编辑器。
需求
我们将需要以下物品。
- 文本编辑器(例如SublimeText，TextMate，Coda，NotePad ++)或者IDE(例如Eclipse)
- Web浏览器，例如Chrome或者Firefox
- TinyMCE
- jQuery
假设条件
假定您已完成TinyMCE的设置。
要了解有关TinyMCE设置的更多信息，请查看本教程。
所以开始吧...
项目文件夹的结构如下所示...
tinymce | +--js | | | +-- jquery.min.js | +--plugin | | | +--tinymce | | | +-- some folders | | | +-- init-tinymce.js | | | +-- tinymce.min.js | +-- index.html
步骤1：建立档案
在tinymce项目文件夹中创建setdata.html文件。
在js文件夹中创建setdata.js文件。
该文件将包含我们将要编写JavaScript代码。
现在项目文件夹将如下所示...
tinymce | +--js | | | +-- jquery.min.js | | | +-- setdata.js | +--plugin | | | +--tinymce | | | +-- some folders | | | +-- init-tinymce.js | | | +-- tinymce.min.js | +-- index.html | +-- setdata.html
步骤2：程式码
打开setdata.html文件并编写以下代码。
<!DOCTYPE html> <html> <head> <title>TinyMCE - Set Data</title> </head> <body> <button id="set-data-btn" >Set Data</button> <form id="form-data" method="post"> <textarea class="tinymce" id="texteditor"></textarea> <input type="submit" value="View Data"> </form> <div id="data-container"> </div> <!-- javascript --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script> <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script> <script type="text/javascript" src="js/setdata.js"></script> </body> </html>
打开setdata.js文件并编写以下代码。
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("texteditor").getContent();
$("#data-container").html(content);
return false;
});
$("#set-data-btn").on("click", function(e) {
var content = "<p>Hello World</p>";
tinymce.get("texteditor").setContent(content);
});
});
