[英]How to get value of a textarea which is controlled by a javascript html editor?
[英]How to get input of Html editor in textarea using javascript
我正在制作一个制作html编辑器的项目。 我在网上下载了一个试图根据我的需要修改它的程序,我很难在textarea and input type
使用javascript或jquery输出编辑的内部html,所以我可以将它保存到我的数据库中。 它只显示html元素中的输出,但不显示textarea中的输出。
更多关于我需要什么的解释
[please start typing your code here]
请问这就是让我无法完成我的工作。如果有人可以帮助我或建议使用其他方法或程序来存档,我将不胜感激。 谢谢你们这里的节目
HTML
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/monokai_sublime.min.css">
<style class="cp-pen-styles">.ace-md{
height: 300px;
}</style>
<div ng-app="app" class="container-fluid">
<div ng-controller="ctrl" class="row">
<div class="col-md-6">
<h1>Markdown Editor</h1>
<div ace-code-editor class="ace-md"></div>
</div>
<div class="col-md-6">
<h1>Markdown Preview</h1>
<div markdown-viewer></div>
<input type="text" markdown-viewer id="outpt-hm"></input>
<--!<textarea markdown-viewer id="outpt-hm"> TRY TO UNCOMMENT THIS AND SEE THE RESULT</textarea>-->
</div>
</div>
</div>
J QUERY-LIBERY让它工作
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>
J QUERY SCRIPT
<script>
var app = angular.module('app', []);
app.controller('ctrl', [
'$scope',
function ($scope) {
ace.config.set('basePath', '//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/');
}
]);
app.directive('aceCodeEditor', [function () {
return {
link: function (scope, element, attrs) {
scope.editor = ace.edit(element[0]);
scope.editor.getSession().setMode('ace/mode/markdown');
scope.editor.setTheme('ace/theme/monokai');
scope.editor.getSession().on('change', function (e) {
scope.$emit('ace.editor.change');
});
}
};
}]);
app.directive('markdownViewer', [function () {
return {
link: function (scope, element, attrs) {
scope.$on('ace.editor.change', function () {
element.html(marked(scope.editor.getValue()));
element.find('pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
element.find('table').addClass('table');
});
}
};
}]);//HERE I TRY USING JAVASRCIPT BUT IT DIDN'T WORK //document.getElementById('outpt-hm').value = getElementsByClassName("ace_text-input").innerHTML; </script>
也许您可以尝试像这样更改markdownViewer
代码段 - 如果您看到警报并且数据符合您的预期,那么您可以随意使用该值。 这是没有经过测试的,之前从未见过编辑。
app.directive('markdownViewer', [function () {
return {
link: function (scope, element, attrs) {
scope.$on('ace.editor.change', function () {
var data=scope.editor.getValue();
alert( 'If you see data here then you can do stuff with it!!!\n\n'+data );
element.html(marked(data));
element.find('pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
element.find('table').addClass('table');
});
}
};
}]);
HTML表单元素(一些,而不是全部)可以具有placeholder
值 - 在查看表单时查看的默认值 - 尽管它不是字段的实际value
。
例子:
<textarea id='bob' name='bob' cols=80 rows=10 placeholder='The placeholder text here'></textarea>
<input type='text' id='sue' name='sue' placeholder='another placeholder' />
你也可以在样式表中找到附加内容。
<style>
::-webkit-input-placeholder {
font-size:1em;
font-style:italic;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:black
}
:focus::-webkit-input-placeholder{
color:transparent;
}
:-moz-placeholder {
font-size:1em;
font-style:italic;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:black
}
:focus:-moz-placeholder{
color:transparent;
}
::-moz-placeholder {
font-size:1em;
font-style:italic;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:black
}
:focus::-moz-placeholder {
color:transparent;
}
:-ms-input-placeholder {
font-size:1em;
font-style:italic;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:black
}
:focus:-ms-input-placeholder {
color:transparent;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.