[英]Can i use a javascript inline edit library in my angular 2 project?
This is the library: 这是库:
http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/ http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/
This is used for inline editing on html pages. 用于html页面上的内联编辑。 My code on HTML page is shown below -
我在HTML页面上的代码如下所示-
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <script src="http://sco7.com/del/jquery-contenteditable.js"></script> <script> $("#basic").editable(); $("#paragraph").editable({ multiline: true, autoselect: true }); $("#alert").editable({ multiline: true, saveDelay: 800, save: function(e, ui) { alert("Saving actual content: " + ui.content); } }); $("#scalable").editable({ multiline: true }); $("#nonempty").editable({ multiline: true, saveDelay: 600, autoselect: true, save: function(e, ui) { alert("Saving actual content: " + ui.content); }, validate: function(e, ui) { return ui.content !== ""; } }); $("#complex").editable({ content: "a", //only link <a> is editable autoselect: true, save: function(e, ui) { alert("New link: " + ui.content); }, validate: function(e, ui) { return ui.content !== "" } }); </script>
<p id="alert"> This sample fires alert each time changed content is supposed to be saved (eg sent to server). It is currently set up to fire after 800ms delay of not typing anything. </p>
I want to use this in my angular project. 我想在我的角度项目中使用它。 Can i use this as it is ?
我可以按原样使用吗? Like the
<p id="alert">
, i need to do in exact similar way ? 像
<p id="alert">
,我需要以完全相似的方式来做吗? Please advise. 请指教。
You can use contenteditable
attribute or set designmode
on html elements to make it editable. 您可以使用
contenteditable
属性或在html元素上设置designmode
使其可编辑。 For more information you can refer Mozilla Developer Network 有关更多信息,请参考Mozilla开发人员网络。
$(document).ready(function(){ $("#alert").keyup(function(){ console.info($(this).html()); // prints edited text console.info("Inner Html---->"+$("#container").html()); // prints html of edited text }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <p id="alert" contenteditable="true"> EDIT ME </p> </div>
Example Code 范例程式码
<div #container>
<p #alert contenteditable="true">EDIT ME</p>
</div>
Script File 脚本文件
import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('container') el:ElementRef;
constructor(private rd: Renderer2) {}
ngAfterViewInit() {
this.el.nativeElement.innerHtml;
}
Option 1: Add scripts directly 选项1:直接添加脚本
You can add that scrips directly in your page using
$("selector")
您可以使用
$("selector")
在页面中直接添加脚本
index.html index.html
<h2 id="basic">
Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing.
</h2>
<!--do not forget add scripts-->
<!--basic scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/src/jquery-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<!--your scripts-->
<script src="app.js"></script>
<script src="your-editable.js"></script>
app.js app.js
var app = angular.module("app", []);
your-editable.js your-editable.js
$("#basic").editable();
Options 2: convert to directive 选项2:转换为指令
There you can convert the editable to directive to have more access on elements
在那里,您可以将editable转换为伪指令以对元素进行更多访问
index.html index.html
<!--options: basic, paragraph, alert, scalable, nonempty, complex-->
<h2 content="basic">
Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing.
</h2>
<!--do not forget add scripts-->
<!--basic scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-jQuery-UI-Based-Content-editable-Widget-contenteditable-js/src/jquery-contenteditable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<!--your scripts-->
<script src="app.js"></script>
<script src="directive.js"></script>
app.js app.js
var app = angular.module("app", []);
directive.js 指令
Also you can improve this directive to get more options from developers
您也可以改进此指令以从开发人员那里获得更多选择
app.directive("content", function () {
return {
restrict: "A",
scope: {
content: "@"
},
link: function ($scope, $element) {
switch ($scope.content) {
case "basic":
$element.editable();
break;
case "paragraph":
$element.editable({
multiline: true,
autoselect: true
});
break;
case "alert":
$element.editable({
multiline: true,
saveDelay: 800,
save: function (content) {
alert("Saving actual content: " + content);
}
});
break;
case "scalable":
$element.editable({
multiline: true
});
break;
case "nonempty":
$element.editable({
multiline: true,
saveDelay: 600,
autoselect: true,
save: function (content) {
alert("Saving actual content: " + content);
},
validate: function (content) {
return content !== "";
}});
break;
case "complex":
$element.editable({
content: "a",
autoselect: true,
save: function (content) {
alert("New link: " + content);
},
validate: function (content) {
return content !== "";
}});
break;
default:
$element.editable();
}}}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.