富文本编辑器

WangEditor 富文本

include

• include/wangEditor

去 GITHUB 下载一个新的 wangEditor-next.js 放到这个目录下面

修改 php 代码

• include/inc/inc_fun_funAdmin.php

修改如下

    else if($GLOBALS['cfg_html_editor']=='wangEditor')
    {
        $fvalue = str_replace("`", "", $fvalue);

        $link = $GLOBALS["cfg_cmspath"]."/include/wangEditor/style.css";
        $script = $GLOBALS["cfg_cmspath"]."/include/wangEditor/WangEditorNext.js";
        $uploadImage = $GLOBALS["cfg_cmspath"]."/include/dialog/select_images_post_wangEditor.php";
        $uploadVideo = $GLOBALS["cfg_cmspath"]."/include/dialog/select_media_post_wangEditor.php";

        // 内容模型存在多个编辑器的时候无法编辑
		static $initComplete;
		if (!empty($initComplete)) {
			$link = '';
			$script = '';
		}
        $initComplete = true;

        $code = '
            <link href="'.$link.'" rel="stylesheet">
            <style>
                #'.$fname.'editor-toolbar {
                    border: 1px solid #ccc;
                }
                #'.$fname.'editor-text-area {
                    border: 1px solid #ccc;
                    border-top: none;
                    font-size: 16px;
                    height: '.$nheight.'px;
                }
                #'.$fname.'status {
                    margin-top: 10px;
                    margin-bottom: 20px;
                    color: #999;
                }

                #'.$fname.'editor-text-area ul li {
                    list-style-type: disc;
                }
                #'.$fname.'editor-text-area ol li {
                    list-style-type: decimal;
                }
                #'.$fname.'editor-text-area a {
                    color: rgb(0, 0, 238) !important;
                }
            </style>
            <div>
            <div id="'.$fname.'editor-toolbar"></div>
            <div id="'.$fname.'editor-text-area"></div>
            <textarea id="'.$fname.'" name="'.$fname.'" style="display:none;"></textarea>
            </div>
            <div id="'.$fname.'status"></div>
            <script src="'.$script.'"></script>
            <script>
                const '.$fname.'editor = window.wangEditor.createEditor({
                    selector: "#'.$fname.'editor-text-area",
                    content: [],
                    html: `'.$fvalue.'`,
                    config: {
                        placeholder: "请输入内容",
                        MENU_CONF: {
                            uploadImage: {
                                server: "'.$uploadImage.'",
                                fieldName: "imgfile",
                                maxFileSize: 10 * 1024 * 1024,
                                timeout: 60 * 1000,
                                onFailed(file, res) {
                                    if (res.message === undefined) {
                                        alert("php.ini中的内存分配可能过小")
                                    } else {
                                        alert(res.message)
                                    }
                                },
                                onError(file, err, res) {
                                    alert(err)
                                }
                            },
                            uploadVideo: {
                                server: "'.$uploadVideo.'",
                                fieldName: "upfile",
                                maxFileSize: 1024 * 1024 * 1024,
                                timeout: 60 * 1000,
                                onFailed(file, res) {
                                    if (res.message === undefined) {
                                        alert("php.ini中的内存分配可能过小")
                                    } else {
                                        alert(res.message)
                                    }
                                },
                                onError(file, err, res) {
                                    alert(err)
                                }
                            }
                        },
                        onCreated(editor) {
                            const text = editor.getText()
                            const html = editor.getHtml()
                            document.getElementById("'.$fname.'status").innerHTML = `当前文字数量：${text.length}`
                            document.getElementById("'.$fname.'").value = html
                        },
                        onChange(editor) {
                            const text = editor.getText()
                            const html = editor.getHtml()
                            document.getElementById("'.$fname.'status").innerHTML = `当前文字数量：${text.length}`
                            document.getElementById("'.$fname.'").value = html
                        },
                        customPaste (editor,event){
                            const html = event.clipboardData.getData("text/html"); // 获取粘贴的 html

                            const text = event.clipboardData.getData("text/plain"); // 获取粘贴的纯文本
                              console.log(text);
                            const rtf = event.clipboardData.getData("text/rtf"); // 获取 rtf 数据（如从 word wsp 复制粘贴）
                            // wangEditor仅仅只认getHtml()，所以直接插入html即可

                            // 自定义插入内容 统统插入html就行。无论是world 还是其他的他会自动识别
                            //  editor.dangerouslyInsertHtml(result);
                            // editor.insertText(text);
                            // 返回 false ，阻止默认粘贴行为
                             // editor.InsertHtml(html);
                            editor.setHtml(text);
                            event.preventDefault();
                            return false; // 返回值（注意，vue 事件的返回值，不能用 return）
                        }
                    }
                })

                const '.$fname.'toolbar = window.wangEditor.createToolbar({
                    editor: '.$fname.'editor,
                    selector: "#'.$fname.'editor-toolbar",
                    config: {
                        excludeKeys: [
                            "emotion"
                        ]
                    },
                    mode: "default"
                })
            </script>
        ';

        if($gtype=="print")
        {
            echo $code;
        }
        else
        {
            return $code;
        }
    }