配置TinyMCE網頁文字編輯器不顯示html head body等標籤資訊
TinyMCE是一個非常優秀的HTML網頁文字編輯器，可以完美地跟input結合。 專案主頁：https://www.tiny.cloud/
使用非常簡單
<textarea data-editor name="text" class="form-control" rows="6"></textarea> <script src="/js/tinymce/tinymce.min.js"></script>
tinymce.init({
selector : '[data-editor]'
, content_css : $dataEditor.attr('data-editor') || ''
, language : (FE_LOCAL.language || '').replace('-', '_')
, menubar : 'edit insert format table'
, relative_urls : false
, remove_script_host : false
, convert_urls : true
, plugins : [
"advlist autolink lists link image charmap print preview anchor"
, "searchreplace visualblocks code fullscreen fullpage"
, "insertdatetime media table paste textcolor colorpicker contextmenu"
]
, image_dimensions : false
, toolbar: "insertfile undo redo | styleselect | bold italic underline strikethrough | fontselect fontsizeselect | "
+ "forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | "
+ "link image code print"
, setup: function(editor) {
editor.on('init', function(e) {
})
editor.on('change', function(e) {
editor.save()
})
editor.on('keyup', function(e) {
editor.save()
})
}
})
其中監聽editor的事件可以讓文字有改動時，立即儲存到對應的form表單元素中
不過預設配置獲取的結果是帶HTML/head/body等標籤的，如果只想要你編輯部分的HTML程式碼可將 fullpage 外掛去掉即可。
, plugins : [
"advlist autolink lists link image charmap print preview anchor"
, "searchreplace visualblocks code fullscreen"
, "insertdatetime media table paste textcolor colorpicker contextmenu"
]