js在线编辑器（所有的游览器为什么打不开在线编辑器）

本文目录

• 所有的游览器为什么打不开在线编辑器
• Web office 文档在线编辑控件，该如何解决
• 关于js 用iframe做的在线编辑器如何保存输入焦点的问题
• 如何采用element-plus，基于codemirror6实现sql在线编辑器
• html在线编辑器怎么用
• 安卓手机打开js文件
• 有没有那种做数据自动填报的工具

所有的游览器为什么打不开在线编辑器

在线器一般是基于Java，JS或者C#之类的跨平台语言，如果你操作系统里的Java运行库，VC运行库什么的文件缺失或者版本不对，就可能换什么浏览器都打不开。

Web office 文档在线编辑控件，该如何解决

一般来说两种途径。一种是利用插件，比如PageOffice。好处是服务端有一整套的开发接口，劣势是需要安装插件，客户端需要有Word等Office应用程序安装，不同的客户端环境不同可能造成后继使用过程中的维护量。
还有一种是无插件的方式，Office 365就是典型的，不过如果是私有化部署，就不能用Office 365了。
还有一个是uzer.me，能提供无插件的原生Office，提供JS SDK和REST API，各种编程语言都能对接。好处是无插件，劣势是只支持webRTC的浏览器，比如火狐、谷歌，360极速等，IE需要安装插件后才能支持。
如果只是在线，类似Word的模式，那么其实更多是一个富文本的器，这个用HTML就可以实现，有一些开源的工具的。

关于js 用iframe做的在线编辑器如何保存输入焦点的问题

var MyEditorID = ""; //是否开启设计模式
function EditorDesignMode(EditorID)
{
var deditor = document.getElementById(EditorID+"_iframe").contentWindow;
deditor.document.designMode="on";
//deditor.contentEditable="true";
deditor.document.open();
deditor.document.writeln("《html》《head》《title》《/title》《/head》《body》《/body》《/html》");
deditor.document.close(); MyEditorID = EditorID+"_iframe";

deditor.document.body.onclick =GetPos;
deditor.document.body.onselect =GetPos;
deditor.document.body.onkeyup =GetPos;
} function GetPos()
{
var deditor = document.getElementById(MyEditorID).contentWindow;

deditor.pos = deditor.document.selection.createRange();
//alert("dafd");
} //插入图片至器
function InsertsImageGo(imageurl,EditorID)
{

var deditor = document.getElementById(EditorID+"_iframe").contentWindow;

// 聚焦器
deditor.focus();
//插入图片处理
if(imageurl != "")
{
if (window.navigator.userAgent.indexOf("MSIE")《1)
{
deditor.document.execCommand(’InsertImage’,false,imageurl);
}
else
{
var _image = document.createElement("img");
_image.src=imageurl;
_image.border="0"; if (deditor.document.selection.type.toLowerCase() != "none")
{
deditor.document.selection.clear() ;
}
deditor.pos.pasteHTML(_image.outerHTML);
}
}

// 聚焦器
deditor.focus();
HideDiv("PopDiv");
}在iframe里加上onclick,onselect,onkeyup事件，并保存当前的焦点，再插入的时候在刚才保存的焦点处插入就可以了

如何采用element-plus，基于codemirror6实现sql在线编辑器

js在线sql器，下载后导入IDE工具中，在浏览器访问sql-editor-master/index.html ，效果如下(含括号高亮显示、显示折叠栏)：
***隐藏网址***
《link rel="stylesheet" href="css/codemirror.css" /》
《link rel="stylesheet" href="test/addon/fold/foldgutter.css"》
《link rel="stylesheet" href="css/theme/dracula.css" /》
《link rel="stylesheet" href="css/show-hint.css" /》
《link rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css"》
《link rel="stylesheet" href="js/layui/css/layui.css"》

《link rel="stylesheet" href="css/index.css" /》
《script type="text/javascript"》var baseUrl ="";《/script》
《script type="text/javascript" src="js/jquery.min.js"》《/script》
《script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"》《/script》
《script type="text/javascript" src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"》《/script》
《script type="text/javascript" src="js/editor/codemirror.js"》《/script》
《!-- 折叠栏显示 --》
《script type="text/javascript" src="test/addon/fold/foldcode.js"》《/script》
《script type="text/javascript" src="test/addon/fold/foldgutter.js"》《/script》
《script type="text/javascript" src="test/addon/fold/comment-fold.js"》《/script》
《!-- 括号高亮匹配 --》
《script type="text/javascript" src="test/addon/fold/matchbrackets.js"》《/script》

《script type="text/javascript" src="js/editor/sublime.js"》《/script》
《script type="text/javascript" src="js/editor/sql.js"》《/script》
《script type="text/javascript" src="js/editor/sql-hint.js"》《/script》
《script type="text/javascript" src="js/editor/show-hint.js"》《/script》
《!-- sql格式 --》
《script type="text/javascript" src="js/editor/formatting.js"》《/script》
《script type="text/javascript" src="js/editor/sql-formatter.min.js"》《/script》

《script type="text/javascript" src="js/layui/layui.js"》《/script》
《script type="text/javascript" src="js/index.js"》《/script》

《textarea id="code"》《/textarea》
核心js代码：
//根据DOM元素的id构造出一个器
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
mode:"text/c-mysql", //实现Java代码高亮
lineNumbers:true,
matchBrackets: true, //括号高亮匹配
theme:"default",
keyMap: "default",
extraKeys:{"Tab":"autocomplete"},
hint: CodeMirror.hint.sql,
lineWrapping: true, //是否换行
foldGutter: true, //是否折叠
gutters: , //添加行号栏，折叠栏
hintOptions: {
tables: tablewords

}

});
输入关键词提示等信息的配置：allWords.json
动态设置表字段等信息：
let tableWords = {"dual": };
let tableName = "tn_user";
tableWords.push("userId");
editor.setOption("hintOptions", {"tables": tableWords});
tableWords json格式如下：
"tableWords": {
"cp_sku": [
"skuid",
"cpbh",
"tcbh"
],
"user_info": [
"user_id",
"user_token",
"user_name",
"user_type",
"password"
]
}

html在线编辑器怎么用

只要你输入任意字元在任意器窗格里，你会立刻发现「网址列」发生了变化，如下图所示，编号1的地方就是你的Bin ID，编号2的地方则是这个Bin的版本编号 (预设会从1开始)，编号3的地方则是目前的显示模式，edit则代表「」模式。预设的情况下，你输入的HTML / CSS / JavaScript都会立刻反映到最右边的Output窗格。

注 :在JS Bin里面，每一个前端网页组合( HTML + CSS + JavaScript )都被称为一个Bin！

当然，只要你把这个Bin设定完成后，便可直接把你当下的JS Bin网址分享出去，非常方便！

导览列介绍

如下图是JS Bin进入后的主要版面，非常简洁，最上方就是个导览列而已，接下来会依图编号解说：

安卓手机打开js文件

一般情况下，安卓手机自带的文件管理器都不能直接打开 js 文件。但是你可以使用一些第三方应用程序来打开它：
1. 首先你需要在 Google Play 中下载一个可以打开 js 文件的文本器，比如 Jota+ 或者 QuickEdit。
2. 然后，打开文本器，从“文件”菜单中选择“打开”，浏览到你要打开的 js 文件所在的文件夹，并选择相应的文件。
3. 当文本器加载并打开 js 文件时，你应该可以看到 JavaScript 的代码了。
一些高级的代码器，像 QuickEdit、Coder 和 AWD IDE 等，还可以帮助你高效地 JavaScript 的代码。

有没有那种做数据自动填报的工具

借助SpreadJS类Excel的开发工具可以解决数据自动填报问题。

数据填报，是 SpreadJS 纯前端表格控件的应用场景之一。SpreadJS 提供类 Excel 的数据展示与数据回填入库的 API，可满足数据填报系统的全部需求。

将 SpreadJS 与系统集成，可快速实现各类表单设计、在线填报数据、Excel 导入导出、打印报送、实时预览、数据校验、服务端数据交互等功能，通过对其二次扩展，可以将 SpreadJS 作为数据填报模块直接嵌入到 Web 系统，满足批量导入导出 Excel、大数据量填报、填报暂存、多 sheet 填报、多级上报等多场景业务需求。

类 Excel 填报模式，极易上手和使用

SpreadJS 在线表格器提供与 Excel 高度类似的填报界面与使用体验，您可直接在器中在线填报数据，也可将 Excel 文档导入器作为原始表单模板，快速创建单页网格报表、多 Sheet 页报表、行表单、区域报表等多种模板类型，不仅保留了 Excel 的数据处理能力，还可将模板数据传输至服务端进行有效的管理和存储。

借助 SpreadJS 开放的 API 和多种填报组件，您可轻松实现数据合法性校验、数据汇总查看、在线模板设计、模板下发、双向数据绑定、填报权限管控、数据联动、版本管理等功能，大幅简化填报系统的开发难度。