富文本框wangEditor——例

Posted linjiangxian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本框wangEditor——例相关的知识,希望对你有一定的参考价值。

官方文档:http://www.wangeditor.com/

 

效果:

技术图片

 

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>wangEditor demo</title>
        <style>
            *{
                font-size:14px;
            }
        </style>
    </head>
    <body>
        <div id="editor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
        <button id="controlBtn" onclick="changeState()">禁用</button>
        <button id="getBtn" onclick="getContent()">获取内容</button>
        <p>html:</p>
        <div id="content_html"></div>
        <p>text:</p>
        <div id="content_text"></div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!-- 注意, 只需要引用 JS,无需引用任何 CSS-->
        <script type="text/javascript" src="js/wangEditor.js"></script>
        <script type="text/javascript">
            var E = window.wangEditor
            var editor = new E(‘#editor‘) // 或者 var editor = new E( document.getElementById(‘editor‘) )
            editor.customConfig.menus = [ // 自定义菜单配置,默认有以下菜单
                ‘head‘, // 标题
                ‘bold‘, // 粗体
                ‘fontSize‘, // 字号
                ‘fontName‘, // 字体
                ‘italic‘, // 斜体
                ‘underline‘, // 下划线
                ‘strikeThrough‘, // 删除线
                ‘foreColor‘, // 文字颜色
                ‘backColor‘, // 背景颜色
                ‘link‘, // 插入链接
                ‘list‘, // 列表
                ‘justify‘, // 对齐方式
                ‘quote‘, // 引用
                ‘emoticon‘, // 表情
                ‘image‘, // 插入图片
                ‘table‘, // 表格
                ‘video‘, // 插入视频
                ‘code‘, // 插入代码
                ‘undo‘, // 撤销
                ‘redo‘ // 重复
            ]
            editor.customConfig.uploadImgServer = ‘上传图片服务器‘;
            // editor.customConfig.uploadImgFileName = ‘‘;
            editor.customConfig.menuFixed = false; // 关闭菜单栏fixed,吸顶问题
            editor.create()

            var state = true;

            function changeState() {
                state = !state;
                if (state) {
                    $(‘#controlBtn‘).html(‘禁用‘);
                    // 开启编辑功能
                    editor.$textElem.attr(‘contenteditable‘, true);
                } else {
                    $(‘#controlBtn‘).html(‘启用‘);
                    // 禁用编辑功能
                    editor.$textElem.attr(‘contenteditable‘, false);
                }
            }

            function getContent() {
                var e_html = editor.txt.html(); //获取html
                var e_text = editor.txt.text(); //获取text
                $(‘#content_html‘).text(e_html);
                $(‘#content_text‘).text(e_text);
            }
        </script>
    </body>
</html>

 

以上是关于富文本框wangEditor——例的主要内容,如果未能解决你的问题,请参考以下文章

wangEditor富文本编辑器

富文本框

wangEditor上传图片

kindeditor富文本框使用方法

wangEditor直接粘贴图片实现

wangEditor 3 富文本编辑使用-