富文本框

Posted 2021-12-05 joezx

富文本框

    由于html中原生的textarea功能太弱,无法完成一些字体,颜色等功能,因此我们在开的时候经常会使用富文本框

    UEditor, CKEditor,wangEditor 市面用得比较多的富文本框

    使用是的wangEditor,要学习的话可以去看它的官网 -> http://www.wangeditor.com/

    主要是完成文本框的展示

<div id="intro"></div>
<input type="hidden" name="intro" id="txtIntro" />
...
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script type="text/javascript">
     var E = window.wangEditor
     //获取到咱们的编辑器位置
     var editor = new E(‘#intro‘)
     //获到取相应的元素(提交的intro元素)
    //监听编辑器的修改事件(html就是编辑器中的内容)
     editor.customConfig.onchange = function (html) {
         //console.debug(html)
         //把富文框的内容放进去
         txtIntro.val(html);
     };
     // 创建对应的编辑器
     editor.create();
</script>