如何使用 javascript 在 textarea 中获取 Html 编辑器的输入

How to get input of Html editor in textarea using javascript

拜托,我正在做一个制作 html 编辑器的项目。 我在网上下载了一个程序,试图根据我的需要对其进行修改,但我很难使用 javascript 或 jquery 将其输出到 textarea and input type 来获得编辑的内部 html所以我可以将它保存到我的数据库中。它仅在 html 元素中显示输出,但不在文本区域中显示。

我需要什么的更多解释

  1. 1 当我在编辑器中键入文本时,我希望它 return 在一个隐藏的 文本区域。
  2. 2 我希望能够将 保存在我的数据库中。
  3. 3 我希望编辑器具有默认文本以显示 LIKE [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 QERY-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 查询脚本

<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>