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

Question

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

我需要什么的更多解释

1 当我在编辑器中键入文本时，我希望它 return 在一个隐藏的文本区域。
2 我希望能够将保存在我的数据库中。
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>

Answer 1

也许您可以尝试像这样更改 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>

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

How to get input of Html editor in textarea using javascript

html

javascript

php

jquery

rich-text-editor