THINKPHP5.1使用富文字編輯器wangEditor
阿新 • • 發佈:2019-01-08
首先,本文中的程式碼在不使用AJAX的場景中。
我們需要知道幾點:
0、wangEditor v3 預設只支援div方式顯示出編輯器。
1、wangEditor 從v3版本開始不支援 textarea ,但是可以通過onchange來實現 textarea 中提交富文字內容。
2、div是無法向後臺傳遞值的,F12看下編輯器div的屬性就知道了。
整體思路:
0、建立一個div用來顯示出編輯器。
1、通過程式碼給textarea傳遞編輯器div中p標籤的值。
2、我們給textarea一個name屬性。
3、在後端接收值。
參考手冊:
官方例項:
使用 textarea
<div id="div1"> <p>歡迎使用 <b>wangEditor</b> 富文字編輯器</p> </div> <!--我在這做了修改,給了一個name屬性,方便後端接收值--> <textarea name="content" id="text1" style="width:100%; height:200px;"></textarea> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="../wangEditor.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') var $text1 = $('#text1') editor.customConfig.onchange = function (html) { // 監控變化,同步更新到 textarea $text1.val(html) } editor.create() // 初始化 textarea 的值 $text1.val(editor.txt.html()) </script>