wangEditor 全屏预览查看源码

wangEditor 全屏 & 预览 & 查看源码

一、参考地址：https://www.kancloud.cn/wangfupeng/wangeditor3/335784

二、全屏

虽然 wangEditor 没有内置全屏功能，但是你可以通过简单的代码来搞定，作者已经做了一个demo来示范。通过运行 demo（文档一开始就介绍了）即可看到该示例页面，直接查看页面源代码即可。

全屏功能也可参考这个插件 https://github.com/chris-peng/wangEditor-fullscreen-plugin
预览源码 & 查看源码

如果需要预览和查看源码的功能，也需要跟全屏功能一样，自己定义按钮。点击按钮时通过editor.txt.html()获取编辑器内容，然后自定义实现预览和查看源码功能。通过editor.txt.html(value)可以更新源码，这样就可以做到修改源码了。

三、使用方法：

依赖jquery或者zepto，须先引入jquery或zepto。有兴趣可修改为无依赖版本，代码很简单。

引入wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个文件。

在wangEditor的create方法调用后，再调用插件的初始化方法，如：

var E = window.wangEditor;
   var editor = new E('#editor');
   editor.create();
   E.fullscreen.init('#editor');

四、代码

1、css

@CHARSET "UTF-8";.w-e-toolbar {flex-wrap: wrap;-webkit-box-lines: multiple;
}.w-e-toolbar .w-e-menu:hover{z-index: 10002!important;
}.w-e-menu a {text-decoration: none;
}.fullscreen-editor {position: fixed !important;width: 100% !important;height: 100% !important;left: 0px !important;top: 0px !important;background-color: white;z-index: 9999;
}.fullscreen-editor .w-e-text-container {width: 100% !important;height: 95% !important;
}

2、js

/*** @todo 全屏*/
window.wangEditor.fullscreen = {// editor create之后调用init: function(editorSelector){$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" onclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');},toggleFullscreen: function(editorSelector){$(editorSelector).toggleClass('fullscreen-editor');if($(editorSelector + ' ._wangEditor_btn_fullscreen').text() == '全屏'){$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏');}else{$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏');}}
};/*** @todo 查看源码*/
window.wangEditor.viewsource = {init: function(editorSelector) {$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_viewsource" href="###" onclick="window.wangEditor.viewsource.toggleViewsource(\'' + editorSelector + '\')">源码</a></div>');},toggleViewsource: function(editorSelector) {editorHtml = editor.txt.html();if($(editorSelector + ' ._wangEditor_btn_viewsource').text() == '源码'){editorHtml = editorHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;");$(editorSelector + ' ._wangEditor_btn_viewsource').text('返回');}else{editorHtml = editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ");$(editorSelector + ' ._wangEditor_btn_viewsource').text('源码');}editor.txt.html(editorHtml);editor.change && editor.change(); //更新编辑器的内容}
};

3、调用

    var E = window.wangEditor; var editor = new E('#contentDiv'); editor.create(); E.fullscreen.init('#contentDiv');E.viewsource.init('#contentDiv');

wangEditor 全屏预览查看源码相关推荐

android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
Vue 单/多图片（可全屏预览）翻页轮播组件
支持单/多张图翻页轮播可全屏预览自定义图片宽高自定义无图提示语自带图片加载loading 可将源码根据实际需求改造. 没安装 Element-UI 的可以将图片标签换为原生效果图全屏预览 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
手机端点击图片全屏预览
<!doctype html> 手机端点击图片全屏预览 <div class="category"><img src="1.jpg" ...
Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
android 摄像头比例,Android摄像头是全屏预览最简单的方式.doc
Android摄像头是全屏预览最简单的方式 Android Camera做全屏预览之最简单方法 M厂开发五部:刘博一.全屏预览与非全屏预览的区别对于大多数人来说,我们看电影.玩游戏等都喜欢全屏, ...
android camera 全屏,Android Camera做全屏预览之最简单方法.doc
Android Camera做全屏预览之最简单方法 M厂开发五部:刘博一.全屏预览与非全屏预览的区别对于大多数人来说,我们看电影.玩游戏等都喜欢全屏,我们之所以喜欢全屏的一个主要原因就是全屏的感 ...
微信小程序全屏预览视屏、取消全屏预览
前言 bindfullscreenchange 函数可以监听到视频进入和退出全屏时的事件, 利用次函数,可以实现全屏预览和取消全屏预览的功能. 首先看下bindfullscreenchange回调的参 ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！）
效果图在 Vue3.js 项目中,实现了快速高效的 pdf 预览器工具组件,附带详细的使用教程与详细的注释,保证一键复制轻松搞定! 详细的注释很容易二次修改,很多实用功能,你也可以自定义界面上的样式 ...

wangEditor 全屏预览查看源码

wangEditor 全屏预览查看源码相关推荐

最新文章

热门文章

wangEditor 全屏 预览 查看源码

wangEditor 全屏 预览 查看源码相关推荐

最新文章

热门文章

wangEditor 全屏预览查看源码

wangEditor 全屏预览查看源码相关推荐