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

Question

我正在开发一个制作 html 编辑器的项目。 我在线下载了一个程序，试图根据我的需要修改它，我很难使用 javascript 或 jquery 获取编辑的内部 html，将其输出到

textarea and input type

中，以便我可以将其保存到我的数据库中。它只在 html 元素中显示输出，而不在文本区域中显示输出。

我需要什么的更多解释

1. 1 当我在编辑器中键入文本时，我希望它返回隐藏的文本 文本区域。
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 查询自由使其发挥作用

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

Answer 2

//I’ve been using this component for my projects://

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id="editor" style="width: 480px;"></div>

<p><input type='button' value='Get data' id="btn"></p>

<script>
let editor = jSuites.editor(document.getElementById('editor'), {
    allowToolbar: true,
    value: '<b>This is a basic example...</b><br><br><br><br>'
});

btn.addEventListener('click', () => {
    alert(editor.getData())
})
</script>
</html>

// 如果您有兴趣，这是链接 https://jsuites.net/docs/javascript-html-editor