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"]
回复 (0)
微信扫码 立即评论
