eacoo框架wangeditor组件的使用

作者: 哎哟我去 | 来源:发表于2019-06-21 22:43 被阅读0次

eacoo框架wangeditor组件的使用
wangeditor入门
vue中使用wangeditor
在vue中使用wangeditor(含图片上传)
VUE3（二十六）基于wangeditor自定义富文本插件
wangeditor3+vue2.0简单例子
vue集成wangeditor3.0版本解决光标乱跳等问题
关于在vue项目中使用wangEditor
vue-富文本 wangeditor
阿里Atlas组件框架使用

在表单构造器中的使用因为太简单就直接忽略了。
这里详细记录一下在手写页面中如果调用wangeditor组件的。

必须在页面上引入jQuery！！！
用法一：直接把wangeditor属性写在页面上：

                    <!--编辑器-->
                    <div class="form-group col-sm-12">
                    {php}
                    $wangeditor_attributes = [
                        'id'      => 'news_content',
                        'name'    => 'news_content',
                        'value' => isset($news['news_content'])? $news['news_content']:'',
                        'width'   => '100%',
                        'height'  => '360px',
                        'config'  => 'all',
                        'picturesModal' => 0,//是否显示“多图”按钮
                    ];
                    {/php}
                    {:widget('common/Editor/wangeditor',[$wangeditor_attributes])}
                    </div>
                    <!--编辑器-->

3，用法二：通过控制器传递编辑器属性值：
这里以Thinkphp的写法为例：
控制器内容

public function editor()
    {
        $edit_attr = [
            'id'      => 'news_content',
            'name'    => 'news_content',
            'value' => '我是内容',
            'width'   => '100%',
            'height'  => '360px',
            'config'  => 'all'
        ];
        $this->assign('edit_attr', $edit_attr);
        return $this->fetch();
    }

对应页面内容

<!--编辑器-->
<div class="form-group col-sm-12">
    {:widget('common/Editor/wangeditor',[$edit_attr])}
</div>
<!--编辑器-->

最后在页面上的内容：

<!--编辑器--><div class="form-group col-sm-12">
        <link rel="stylesheet" type="text/css" href="/static/libs/wangeditor/wangEditor-plugins.css">
    <script type="text/javascript" src="/static/libs/wangeditor/wangEditor.min.js"></script>
    <script type="text/javascript" src="/static/libs/wangeditor/wangEditor-plugins.js?v=0.0.1"></script>
<div id="news_content_editor" style="width: 100%;"><div style="background-color:#f1f1f1; border:1px solid #ccc;" class="w-e-toolbar" id="toolbar-elem44200667987496134"><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-header"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-text-heigh"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-font"></i></div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-bold"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-italic"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-underline"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-strikethrough"></i>
        </div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-pencil2"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-paint-brush"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-link"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-list2"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-paragraph-left"></i></div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-quotes-left"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-happy"></i>
        </div><div class="w-e-menu" id="w-e-img7450212591448204" style="z-index:11;"><i class="w-e-icon-image"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-table2"></i></div><div class="w-e-menu" style="z-index:11;"><i class="w-e-icon-play"></i></div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-terminal"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-undo"></i>
        </div><div class="w-e-menu" style="z-index:11;">
            <i class="w-e-icon-redo"></i>
        </div><div class="w-e-menu"><i class="_wangEditor_btn_fullscreen" onclick="window.wangEditor.fullscreen.toggleFullscreen('#news_content_editor')">全屏</i></div><div class="w-e-menu"><i class="w-e-btn-picturesModal" data-url="/admin/upload/attachmentlayer/input_id_name/news_content/path_type/picture/gettype/multiple/from/wangeditor.html" data-gettype="multiple" data-from="wangeditor" onclick="openAttachmentLayer(this);">多图</i></div></div><div style="border:1px solid #ccc; border-top:none; height:300px; z-index:10;" class="w-e-text-container"><div contenteditable="true" style="width:100%; height:100%;" class="w-e-text" id="text-elem5193414786903823"><p>我是内容</p><p><br></p></div></div></div>
<textarea id="news_content" name="news_content" style="display: none;width:100%;height:360px;"></textarea>

<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var E = window.wangEditor
    var editor_news_content = new E('#news_content_editor')
    var $textarea_news_content = $('#news_content')
    editor_news_content.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $textarea_news_content.val(html)
    }
            editor_news_content.customConfig.menus =['head', // 标题
                    'fontSize',  // 大小字体
                    'fontName',  // 字体
                    'bold',  // 粗体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'video',  // 插入视频
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ];//配置工具菜单
        // 配置自定义表情，在 create() 之前配置
    // editor_news_content.customConfig.emotions = {
    //     // 支持多组表情
    //     // 第一组，id叫做 'default'
    //     'default': {
    //         title: '默认',  // 组名称
    //         type: 'image',
    //         content: '/static/libs/wangeditor/emotions/default.data'
    //     },
    //     // 第二组，id叫做'weibo'
    //     'weibo': {
    //         title: '微博表情',  // 组名称
    //         type: 'image',
    //         content: '/static/libs/wangeditor/emotions/weibo.data'
    //     }
    //     // 下面还可以继续，第三组、第四组、、、
    // };
    editor_news_content.customConfig.zIndex = 10;
    editor_news_content.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor_news_content.customConfig.uploadImgServer = "/admin/upload/upload.html";  // 上传图片到服务器
    // 限制一次最多上传 5 张图片
    editor_news_content.customConfig.uploadImgMaxLength = 5
    editor_news_content.customConfig.uploadFileName = 'file'
    editor_news_content.customConfig.uploadImgParams = {
        path_type:'picture',
        uploadtype: 'picture',
        upload_from:'wangeditor'//请求来源
    };
    editor_news_content.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 /ruanwen/member/test.html 这种格式，即可这样插入图片：
            var url = result.data.url
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
    editor_news_content.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
    editor_news_content.create();
    // 初始化 textarea 的值
    $textarea_news_content.val(editor_news_content.txt.html());
    E.fullscreen.init('#news_content_editor');
    //E.switchCode.init('#news_content_editor');
            E.picturesModal.init('#news_content_editor',"/admin/upload/attachmentlayer/input_id_name/news_content/path_type/picture/gettype/multiple/from/wangeditor.html");
        var EditorObj = editor_news_content;//定义wangeditor编辑器对象
    

</script>

</div>
 <!--编辑器-->

eacoo框架wangeditor组件的使用
在表单构造器中的使用因为太简单就直接忽略了。这里详细记录一下在手写页面中如果调用wangeditor组件的。必...
wangeditor入门
1.引入wangeditor 2.页面使用wangeditor 3.封装的组件
vue中使用wangeditor
安装：npm install wangeditor 代码引入 wangEditor (vue环境) 编写组件代码 ...
在vue中使用wangeditor(含图片上传)
1.使用npm下载 npm install wangeditor 2.在使用的项目的组件中引入 import E ...
VUE3（二十六）基于wangeditor自定义富文本插件
项目中需要使用到wangeditor，这里封装一个自定义组件，便于后期使用。首先，官方文档： https://w...
wangeditor3+vue2.0简单例子
把wangeditor作为组件的形式使用上面字最多的地方好好看清楚，只有做了customInsert: func...
vue集成wangeditor3.0版本解决光标乱跳等问题
是因为封装了组件后，使用父级传入的内容，每次输入都会触发wangEditor的onchange事件，而在oncha...
关于在vue项目中使用wangEditor
vue中安装wangEditor使用的npm安装 npm install wangeditor --save 创建...
vue-富文本 wangeditor
"wangeditor": "^4.6.5" 使用
阿里Atlas组件框架使用
APP插件化/组件化框架分析VirtualAPK插件框架简单使用今天主要讲述的阿里Atlas组件框架的简单使用，...

eacoo框架wangeditor组件的使用

相关文章

eacoo框架wangeditor组件的使用

wangeditor入门

vue中使用wangeditor

在vue中使用wangeditor(含图片上传)

VUE3（二十六）基于wangeditor自定义富文本插件

wangeditor3+vue2.0简单例子

vue集成wangeditor3.0版本解决光标乱跳等问题

关于在vue项目中使用wangEditor

vue-富文本 wangeditor

阿里Atlas组件框架使用

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读